.nextAll函数在单击函数内部使用时将不起作用

.nextAll function will not work when used inside a click function

本文关键字：函数 不起作用 内部 单击 nextAll      更新时间：2023-09-26

我试图在模态窗口中列出的复选框中使用jquery中的.nextAll选项。。因此，当用户点击链接，通过函数.on（"点击"）打开模式窗口时，复选框就会出现，我在点击函数中写了一段代码，改变了复选框的复选框属性。

$('input[name="Company"],input[name="Country"]').live("click",function(){
if ($(this).is(':checked')){
    alert("s");
      $(this).nextAll('input[name="'+this.name+'Sub"]').prop('checked',true);
} else {
       alert("n");
      $(this).nextAll('input[name="'+this.name+'Sub"]').prop('checked',false);   
}
});
 <input type="checkbox" class="entityCheckboxHeader1" id="entityCheckboxHeader" name="Company">Company
 <input class="modalEntityCompany" id="entity1" type="checkbox" name="CompanySub">Microsoft
 <input class="modalEntityCompany" id="entity2" type="checkbox" name="CompanySub">Apple
<br /> 
<input type="checkbox" class="entityCheckboxHeader2" id="entityCheckboxHeader" name="Country">Country
 <input class="modalEntity" id="entity3" type="checkbox" name="CountrySub">USA
 <input class="modalEntity" id="entity4" type="checkbox" name="CountrySub">UK

当在jsfiddle或我们创建的新html中尝试时，该程序独立运行良好，但当它在我创建的点击函数中使用时，它不会被wrk。是什么导致了这场冲突？

注意：我使用.live（）函数作为复选框，因为当使用.on（）时，它甚至不会进入.nextAll部分

动态创建部件

function generateTreeHTML(input) {
var html = '';
var entityNumber = 1;
var color = 663399;
html = "<ul id='tree' class='treeview-black' >";
for ( var m = 0; m < input.length; m++) {

        html+="<li>";
    currentEntity = input[m];
    currentEntityType = currentEntity.entity;
    html += "<span style='font-size:12px;  font-family:Helvetica; font-weight:bold;' id='entityHeader' class='entityHeader"
            + getEntityHeader()
            + "'><input name='" + currentEntityType +"' type='checkbox' id='entityCheckboxHeader' class='""
            + 'entityCheckboxHeader'
            + getEntityCheckboxHeader()
            + "'" />"
            + currentEntityType
            + "</span><div style='width:15px; height:10px; background-color:#"
            + colorArray[entityNumber]
            + "; float:right; margin-right:50px; margin-top:5px;'></div>";
            html+="<ul>";
    for ( var n = 0; n < currentEntity[currentEntityType].length; n++) {
        html += "<li>";
        var entityName = currentEntity[currentEntityType][n].entity;
        var entityName1 = entityName.split('.').join("");
        entityName1 = entityName1.split('_').join("");
        entityName1 = entityName1.replace(/ /g, "");
        html += "<span><input type='checkbox' key='"" + entityName
                + "'" mapKey='"" + currentEntityType
                + "'" categoryNumber='"" + entityNumber
                + "'" class='modalEntity' id='"" + 'entity' + getEntityID()
                + "'" name='" + currentEntityType +  "Sub'>" + entityName + "</span>";
        html += "</li>";
    }
    html+="</ul></li>";
    entityNumber = entityNumber + 1;
    html += "<div style='width:200px; border-bottom:1px solid #cccccc; height:1px;'></div>";
}
html += "</ul>";
return html;
    }

.nextAll()方法只查找下一个同级元素（如doco中所述）。您正在动态创建的结构似乎将相关的复选框分别放在不同li元素中各自的跨度中，即它们是彼此的而不是兄弟，或者是您的单击处理程序所属的标头复选框的兄弟。你不能指望你用来寻找适用于不同html结构的元素的遍历方法，就像开车从我的办公室到我家去你家一样。

试试这个：

$('input[name="Company"],input[name="Country"]').live("click",function(){    
   if ($(this).is(':checked')){
      alert("s");
      $('input[name="'+this.name+'Sub"]').prop('checked',true);
   } else {
       alert("n");
      $('input[name="'+this.name+'Sub"]').prop('checked',false);   
   }
});

可以大大简化为：

$('input[name="Company"],input[name="Country"]').live("click",function(){    
      $('input[name="'+this.name+'Sub"]').prop('checked',this.checked);    
});

或者，如果你担心文档中其他地方可能有其他同名的复选框，你可以在点击的标题框所属的同一li元素中查找：

$(this).closest('li')
       .find('input[name="'+this.name+'Sub"]').prop('checked',this.checked);

给一个类（比如checkinput）复选框input[name="Company"] and input[name="Country"]"

$('body').delegate(".checkinput","click",function(){
    if ($(this).is(':checked')){
        alert("s");
          $(this).nextAll('input[name="'+$(this).attr('name')+'Sub"]').prop('checked',true);
    } else {
           alert("n");
          $(this).nextAll('input[name="'+$(this).attr('name')+'Sub"]').prop('checked',false);   
    }
    });
相关文章：