jQuery选择器不适用于动态值

debugcn 发表于 Dev

DomantasŠlaičiūnas

由于某种原因，我的jQuery函数无法处理动态值。

("item-content")当用户单击范围“单击此处”时，我试图显示/隐藏内容。

如果我使用的不是嵌套HTML，则一切正常，但由于某种原因，当我使用嵌套HTML时，我的功能会中断。

$('.item-content').hide();

$(document).on('click','.main .child span.item-title', function(e){
   e.preventDefault();
   $(this).next('.main .child span.item-content').toggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<div class="main">
  <div class="child">
    <span class="item-title" style="cursor:pointer">
       Click here
    </span>

    <div class="item-content">
        <div class="item-body">
                1
        </div>
    </div>
  </div>

  <div class="child">>
    <span class="item-title" style="cursor:pointer">
       Click here
    </span>

    <div class="item-content">
        <div class="item-body">
                2
        </div>
    </div>
  </div>

  <div class="child">>
    <span class="item-title" style="cursor:pointer">
       Click here
    </span>

    <div class="item-content">
        <div class="item-body">
                3
        </div>
    </div>
  </div>
  
</div>

无牌曼彻斯特

.next寻找下一个同级，因此在您的代码中，无需获取正在寻找的span同级的类，即.item-content。

工作示例：

$('.item-content').hide();
$(document).on('click','.main .child span.item-title', function(e){
   e.preventDefault();
   $(this).next().toggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<div class="main">
  <div class="child">
    <span class="item-title" style="cursor:pointer">
       Click here
    </span>

    <div class="item-content">
        <div class="item-body">
                1
        </div>
    </div>
  </div>

  <div class="child">>
    <span class="item-title" style="cursor:pointer">
       Click here
    </span>

    <div class="item-content">
        <div class="item-body">
                2
        </div>
    </div>
  </div>

  <div class="child">>
    <span class="item-title" style="cursor:pointer">
       Click here
    </span>

    <div class="item-content">
        <div class="item-body">
                3
        </div>
    </div>
  </div>
  
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。