目标是父li中最近的元素

Question

我试图在li内切换div，但它对我的不起作用

$('#open_p_table').on('click', function() {
    $(this).closest('li').find('.players').toggle();
});

这是FIDDLE

我做错了什么？

Answer 1

两个span元素共享此ID:open_p_table。

ID必须是唯一的。改为使用类：

$('.open_p_table').on('click', function () {
    $(this).closest('li').find('.players').toggle();
});

<ul>
    <li class="item">   <span class="open_p_table">Players</span>
        <div class="players">description</div>
    </li>
    <li class="item">   <span class="open_p_table">Players</span>
        <div class="players">description</div>
    </li>
</ul>

JSFIDDLE

Answer 2

不采用重复idopen_p_table而采用如下所示的类：

HTML:

<ul>
    <li class="item">
            <span class="open_p_table">Players</span>
            <div class="players">
                description
            </div>
        </li>
    <li class="item">
            <span class="open_p_table">Players</span>
            <div class="players">
                description
            </div>
        </li>
</ul>

Jquery：

$('.open_p_table').on('click', function() {
    $(this).closest('li').find('.players').toggle();
});

工作演示

Answer 3

第一个Id必须是唯一的，所以将其更改为类：

$('.open_p_table').on('click', function() {
        $(this).closest('li').find('.players').toggle();
    });

你的HTML:

<li class="item">
            <span class="open_p_table">Players</span>
            <div class="players">
                description
            </div>
        </li>

演示

Answer 4

http://jsfiddle.net/oexf0624/1/

您正在重新使用id（它必须是唯一的）-我将其更改为class，现在它可以工作了：）

$('.open_p_table').on('click', function() {
    $(this).closest('li').find('.players').toggle();
});

---

<span class="open_p_table">Players</span>
<div class="players">
    description
</div>

Answer 5

Id应该是uique。。！将CCD_ 4改变为类，

$('.open_p_table').on('click', function () {
    $(this).closest('li').find('.players').toggle();
});

.open_p_table{ cursor:pointer; }
.open_p_table + .players {  display:none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<ul>
  <li class="item"><span class="open_p_table">Players</span>
    <div class="players">description</div>
  </li>
  <li class="item"><span class="open_p_table">Players</span>
    <div class="players">description</div>
  </li>
</ul>

Answer 6

您正在使用ID作为选择器。但是，如果DOM中有多个相同的ID，则只选择具有该ID的第一个元素。您需要使用该类。

$('.open_p_table').on('click', function() {
    $(this).closest('li').find('.players').toggle();
});

您的HTML将是

<ul>
    <li class="item">
            <span class="open_p_table">Players</span>
            <div class="players">
                description
            </div>
        </li>
    <li class="item">
            <span class="open_p_table">Players</span>
            <div class="players">
                description
            </div>
        </li>
</ul>

Answer 7

使用类选择器

$('.open_p_table').on('click', function() {
        $(this).closest('li').find('.players').toggle();
    });

ID通常被认为是唯一的