Web Services 如何获取javaScripts中动态元素的InnerText

jm81lzqq  于 2022-12-19  发布在  Java
关注(0)|答案(1)|浏览(173)

我已经纠结了两天了,我在这里看到了很多类似的问题,比如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,提前感谢。

sd2nnvve

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()方法检索这些元素的文本内容。
下面是演示这一点的示例代码:

$('.btn-select').click(function() {
  var $card = $(this).closest('.theme-bg-white');
  var testName = $card.find('.test-name').text();
  var testNum = $card.find('.test-num').text();

  console.log(testName, testNum);
});

我希望这能有所帮助!如果你有任何问题,请告诉我。

相关问题