Question

好吧所以我正在使用jquery mobile创建一个移动应用程序，我有一个动态创建的按钮，在用户搜索联系人时创建。当用户找到他/她搜索到的联系人的匹配项时，该名称将显示在动态创建的标记中。如果存在多个同名人员，则结果可以返回重复项。我现在拥有的代码，如果我点击按钮，我只是想让它提醒我按钮上面的名字。它工作正常，除非有重复，然后它会提醒所有名称，因为所有按钮都有相同的类。

这是创建和按钮的循环：

    for (var i=0; i<contacts.length; i++) {
            $('#srchResults').append("<div id='resultdiv"+i+"' data-role='collapsible'><h3 id = 'nameh3"+i+"'>"+contacts[i].name.formatted+"</h3>"+"<p>"+'<a href="#"                  data-role="button" data-icon="plus" data-iconpos="notext" data-theme="c" data-inline="true" class="btnDisguise">'+'Plus'+'</a>'+'<a href="#" data-role="button" data-icon="info" data-iconpos="notext" data-theme="c" data-inline="true" class="btnInfo">'+'Info'+'</a>'+"</p></div>").trigger('create');    
    }

这是点击后的.btnInfo函数：

    $(document.body).on('click', '.btnInfo', function() {
    var $this = $(this),
    h3text = $this.parents().find("h3").text();
    alert(h3text);
    });

我需要找到一种方法来提醒相关的按钮，非常感谢任何帮助，谢谢。

Answer 1

向resultdiv添加一个类属性，然后使用.closest()查找点击按钮所属的resultdiv，然后找到其中的h3

 for (var i = 0; i < contacts.length; i++) {
     $('#srchResults').append("<div id='resultdiv" + i + "' class='resultdiv' data-role='collapsible'><h3 id = 'nameh3" + i + "'>" + contacts[i].name.formatted + "</h3>" + "<p>" + '<a href="#"                  data-role="button" data-icon="plus" data-iconpos="notext" data-theme="c" data-inline="true" class="btnDisguise">' + 'Plus' + '</a>' + '<a href="#" data-role="button" data-icon="info" data-iconpos="notext" data-theme="c" data-inline="true" class="btnInfo">' + 'Info' + '</a>' + "</p></div>").trigger('create');
 }

然后

$(document.body).on('click', '.btnInfo', function () {
     var $this = $(this),
         h3text = $this.closest('.resultdiv').find("h3").text();
     alert(h3text);
 });

演示：Fiddle

仅返回一个<h3>父标记</h3>的文本

1 个答案: