时间戳

首页 > 解决方案 > jquery选择器不适用于动态值

javascript - jquery选择器不适用于动态值

问题描述

由于某种原因，我的 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>

标签： javascripthtmljquery

解决方案

.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>

推荐阅读