Question

我正努力让Jquery'find'在以下代码中工作。我把它剥离到了基础。简而言之，我想要实现的是，我有两个包含相同名称的列表。当在顶部列表中单击名称时，我想要一个更详细的框在下面切换打开。然后，当再次单击任何一个时，下方框将再次关闭。

我认为Jquery中的'find'有问题。当ID被发送到警报时，收集ID的另一部分工作正常。

我已经查看了其他答案，并且查找部分来自另一个答案，但它在此示例中不起作用，因此可能在某些其他级别上我做错了。

请记住，只找到div或paragraph元素对我的完整代码不起作用。我只是将它们放在这个例子的标签中。我基本上需要找到（在这个例子中），正确div中的para（显然这里只有一个div但是在我的完整代码中加载）。

<html>

<body>

<?php

    for ($x=0; $x<10; $x++) {
        echo "<p class = 'player_name' data-playerid = $x>Player $x</p>";
    }

    echo "<div class = 'individual_player_reports'>";
        for ($x=0; $x<10; $x++) {
            echo "<p class = 'player_name' data-playerid = $x>Player $x</p>";
        }
    echo "</div>";

?>

    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script type="text/javascript">

        $('.player_name').on('click',
            function() {
                var id = $(this).data().playerid;
                $('.individual_player_reports').find("[playerid='" + id + "']").toggle();
        });

    </script>
</body>

Answer 1

playerid !== data-playerid

数据属性就像任何其他属性一样。使用属性equals selector时，请使用属性的全名。

$('.player_name').on('click',function() {
  var id = $(this).data().playerid;
  $('.individual_player_reports').find("[data-playerid='" + id + "']").toggle();
});

$('.player_name').on('click',function() {
  var id = $(this).data().playerid;
  $('.individual_player_reports').find("[data-playerid='" + id + "']").toggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p class="player_name" data-playerid='1'>1</p>
<p class="player_name" data-playerid='2'>2</p>
<p class="player_name" data-playerid='3'>3</p>
<div class="individual_player_reports">
  <p data-playerid='1' style="display: none;">1</p>
  <p data-playerid='2' style="display: none;">2</p>
  <p data-playerid='3' style="display: none;">3</p>
</div>

作为@ T.J。 Crowder建议，在这种情况下你不需要使用.data()，跳过.data并直接获取属性值以避免初始化数据缓存会更有效，除非你使用{{}其他地方也有其他功能。

.data()

Jquery'find'无法使用数据标记

1 个答案: