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

jQuery show/hide only works on first selector

本文关键字：适用于 第一个 选择器 隐藏 显示 jQuery      更新时间：2023-12-21

我正在尝试为我的表创建一个显示-隐藏函数。问题是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>

工作小提琴

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>

我想你正在寻找这样的东西：

jQuery("document").ready(function($) {
    $(".paragraph-div").hide();
    $(".toggle-div").click(function() {
        var $this = $(this);
        var $paragraph = $this.next('.paragraph-div');
        if ($paragraph.is(":visible")) {
            $paragraph.hide();
            $this.html("More Info");
        } else {
            $paragraph.show();
            $this.html("Less Info");
        }
    });
});
<script src="https://code.jquery.com/jquery-1.12.2.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>

（另请参见此Fiddle）

相关文章：