Question

我试图为我的桌子制作一个节目隐藏功能。问题是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>

Answer 2

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

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>

（另见this Fiddle）

jQuery show / hide仅适用于第一个选择器

2 个答案:

段