javascript - jQuery 显示/隐藏仅适用于第一个选择器

Question

我正在尝试为我的 table 制作一个显示隐藏功能。问题是 jQuery 似乎只适用于第一个选择器，而不适用于其他选择器。

谁能帮我解决这个问题吗？

jQuery:

jQuery("document").ready(function($) {
    $("#paragraph-div").hide();

    $("#toggle-div").click(function() {
        if ($("#paragraph-div").is(":visible")) {
           $("#paragraph-div").hide();
            $("#toggle-div").val("Less Info");
        } else {
            $("#paragraph-div").show();
        }
    });
});

HTML:

<table>
    <tr>
        <td>data</td>
    </tr>
    <tr>
        <td>
            <a id="toggle-div">More Info</a>
            <div id="paragraph-div">
                <p>Hidden text - Toggle more info to show.</p>
            </div>
        </td>
    </tr>
    <tr>
        <td>data</td>
    </tr>
    <tr>
        <td>
            <a id="toggle-div">More Info</a>
            <div id="paragraph-div">
                <p>Hidden text - Toggle more info to show.</p>
            </div>
        </td>
    </tr>
    <tr>
        <td>data</td>
    </tr>
    <tr>
        <td>
            <a id="toggle-div">More Info</a>
            <div id="paragraph-div">
                <p>Hidden text - Toggle more info to show.</p>
            </div>
        </td>
    </tr>
</table>

Answer 1

<强> Working fiddle

id 在同一个文档中应该是唯一的，用通用类替换一次重复的，例如:

<a class="toggle-div">
<div class="paragraph-div">

而不是:

<a id="toggle-div">
<div id="paragraph-div">

然后在你的js中使用类选择器.而不是id选择器:

$(".toggle-div")
$(".paragraph-div")

而不是:

$("#toggle-div")
$("#paragraph-div")

注释:

• 您可以在事件中使用 $(this) 而不是 ".toggle-div"
• 您应该使用 $(this).next(".paragraph-div") 选择与点击链接相关的段落。
• div 标记没有 val() 方法，您应该使用 text() 代替。

希望这有帮助。

<小时/>

代码片段

jQuery("document").ready(function($) {

  $(".paragraph-div").hide();

  $(".toggle-div").click(function() 
                         {
    if ($(this).next(".paragraph-div").is(":visible")) {
      $(this).next(".paragraph-div").hide();
      $(this).text("More Info");
    } else {
      $(this).next(".paragraph-div").show();
      $(this).text("Less Info");
    }
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>data</td>
  </tr>
  <tr>
    <td><a class="toggle-div">More Info</a><div class="paragraph-div"><p>Hidden text - Toggle more info to show.</p></div></td>
  </tr>
  <tr>
    <td>data</td>
  </tr>
  <tr>
    <td><a class="toggle-div">More Info</a><div class="paragraph-div"><p>Hidden text - Toggle more info to show.</p></div></td>
  </tr>
  <tr>
    <td>data</td>
  </tr>
  <tr>
    <td><a class="toggle-div">More Info</a><div class="paragraph-div"><p>Hidden text - Toggle more info to show.</p></div></td>
  </tr>
</table>