我已经纠结了两天了,我在这里看到了很多类似的问题,比如This One,这是目前为止最接近的问题,但我还是想不出答案。
这是我想要的
我生成卡动态元素和按钮。当我点击生成卡的按钮,我想检索的文本元素在该卡中。
这是原始html卡片
<div class="col-12 mb-3" data-aos="fade-up" data-aos-delay="300">
<div class="row g-0 border theme-border-radius theme-box-shadow p-2 align-items-center theme-bg-white">
<div class="col-12 col-md-3">
<div class="d-flex">
<div class="d-flex flex-column ms-2">
<span class="font-small d-inline-flex mb-0 align-middle">Test Name </span>
<span class="font-small d-inline-flex mb-0 align-middle">Test Num</span>
</div>
</div>
</div>
<div class="col-4 col-md-2">
<div class="fw-bold">Test Time</div>
</div>
<div class="col-12 col-md-3 text-center mt-md-0 mt-2">
<div class="fw-bold"><i class="bi bi-currency-dollar ms-2"></i>Test Cost</div>
<button type="submit" class="btn-select btn btn-effect">
<span class="font-small">Select</span>
</button>
</div>
</div>
</div>
这是动态生成卡片的JavaScript函数
function TestFunction(parm1, param2, param3) {
// alert('Function Scripts');
$("#card").empty();
var html = "";
$.ajax({
type: "POST",
url: "WebService.asmx/Serverfunction",
data: "{'param1':'" + param1 + "', 'param2':'" + param2 + "', 'param3':'" + param3 + "'}",
// data: "{'Destination':'" + Destination + "'}",
// data: "{'DepDate':'" + DepDate + "'}",
contentType: "application/json",
dataType: "json",
success: function (data) {
try {
//alert("Testing Filter By Search Function : " + Origin);
for (var i = 0; i < data.d.length; i++) {
if (data.d[i].TestName != "") {
html += " <div class='col-12 mb-3' data-aos='fade-up' data-aos-delay='300'>";
html += " <div class='row g-0 border theme-border-radius theme-box-shadow p-2 align-items-center theme-bg-white'>";
html += " <div class='col-12 col-lg-3'>";
html += " <div>";
html += " <span class='font-small d-inline-flex mb-0 align-middle TestName'>" + data.d[i].TestName + "</span> |";
html += " <span class='font-small d-inline-flex mb-0 align-middle TestNum'>" + data.d[i].TestNum + "</span> ";
html += " </div>";
html += " </div>";
html += " <div class='col-4 col-lg-2'>";
html += " <div class='fw-bold TestTime' id='TestTime"+i+"'>" + data.d[i].TestTime + " </div>";
html += " </div>";
html += " <div class='col-12 col-lg-3 text-center mt-2 mt-lg-0'>";
html += " <div class='fw-bold TestCost'><i class='bi bi-currency-dollar ms-2'></i>" + data.d[i].TestCost + " </div>";
html += " <button id='btn"+i+"' type='submit' class='btn-select btn btn-effect'> <span class='font-small'>Select</span></button>";
html += " </div>";
html += " </div>";
html += " </div>";
}
}
$("#card").append(html)
} catch (e) {
error(e);
}
},
error: function (xhr, status, e) { alert(xhr.responseText); }
});
}
我在服务器端(WebService)调用这个函数,它运行良好。卡片是根据返回的记录生成的,如果它;如果它生成了3条记录 x3,则它生成了5条记录 x5,依此类推。
问题是检索文本的这些元素在生成的卡。当其中一个按钮被点击,我想插入到数据库。
我能够识别哪个按钮被点击了,但基于此,我可以想出awy来获取该卡元素的InnerText/InnerHTML。
这是我迄今为止尝试过的方法之一
$(document).on('click', '.btn-select', function(){
var btnId = $(this).attr('id')
alert("Cliked on : "+btnId );
//const testName = $('#btnId').parent.parent.find('.TestName').innerText;
const testName = $('#btnId').parent.parent.find('.TestName').innerHTML;
alert(tot);
alert("Testing");
});
with得到点击的按钮,但我试图导航到根父,并找到元素的类,这显然是行不通的,所以我可能做错了什么,还有什么其他可能的解决方案?.我会很感激,如果有人能我与这一个,我真的卡住了.这是我的第一个真正的项目与组合.
如Asp.net前所述,我正在使用带有Javascript(WebService)的www.example.com Webforms,提前感谢。
1条答案
按热度按时间sd2nnvve1#
要在单击按钮时获取卡片中元素的文本,可以使用.text()方法检索元素的文本内容。
下面是一个如何实现这一点的示例:
首先,可以为卡片中的每个元素赋予唯一的类或id,以便使用jQuery轻松地选择它,例如,可以为TestName元素赋予class .test-name,为TestNum元素赋予class .test-num。
接下来,可以使用.click()方法将click事件处理程序附加到button元素,在事件处理程序函数中,可以使用$(this)选择器引用被单击的button元素,然后使用.closest()方法查找父card元素。
最后,可以使用.find()方法在父card元素中搜索.test-name和.test-num元素,然后使用.text()方法检索这些元素的文本内容。
下面是演示这一点的示例代码:
我希望这能有所帮助!如果你有任何问题,请告诉我。