jQuery中的兄弟元素答案

【问题标题】：sibling elements in jQueryjQuery中的兄弟元素
【发布时间】：2013-06-06 22:44:32
【问题描述】：

我在选择 DOM 中的某些元素时遇到问题。我正在尝试做的是切换 div 的类以使用链接显示和隐藏内容，然后将链接文本与其一起更改。

我的代码现在同时影响所有链接和 div，这当然不是我想要的。我希望链接上方的 div 以及“显示更少”的链接文本受到影响。下面是 HTML 和 jQuery。

<body>
<section id="jdom">
    <h1>Murach's JavaScript and DOM Scripting</h1>
    <h2>Book description</h2>
    <div>
        <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
    </div>
    <div class="hide">
        <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
    </div>
    <a href="#">Show more</a>           

    <h2>About the author</h2>
    <div>
        <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
    </div>
    <div class="hide">
        <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.</p>
    </div>
    <a href="#">Show more</a>

    <h2>Who this book is for</h2>
    <div>
        <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
    </div>
    <div class="hide"> 
        <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure    there isn't anything embarrassing hidden in the middle of text.
    </div>
    <a href="#">Show more</a>               

</section>
</body>

我的 jquery

$(document).ready (function () {
$("a").toggle (
    function() {
        $("div").toggleClass();
        $("a").text("Show less");
    },

    function() {
        $("div").toggleClass();
        $("a").text("Show more");
    }
); //end toggle
}); //end ready

【问题讨论】：

Toggle 事件在 jquery 1.8 中被弃用并在 1.9 中被删除：api.jquery.com/toggle-event

标签： jquery jquery-selectors

【解决方案1】：

你可以这样做：

$(function(){
    $("a").click(function() {
        var div = $(this).prev("div").toggleClass('hide');
        $(this).text(div.hasClass('hide') ? "Show more" : "Show less");
    });
});

Demonstration

请注意，toggle 将两个函数作为参数的用法已被弃用。构建 shim 很容易，但您通常不需要它。

【讨论】：

哇比我快，反正+1！

【解决方案2】：

由于目标元素是前一个兄弟元素，可以使用.prev()方法：

$("a").on('click', function() {
    $(this).text(function(_, oldText) {
        return oldText === 'Show more' ? 'Show less' : 'Show more';
    }).prev('div').toggle();
});

http://jsfiddle.net/4s7QJ/

【讨论】：

【解决方案3】：

$(document).ready(function() {
    $('#jdom a').on('click', function(e) {
        e.preventDefault();
        var hide  = $(this).prev('.hide'),
            state = !hide.is(':visible');

        hide.toggle(state);
        $(this).text(state ? 'Show less' : 'Show more');
    });
});

FIDDLE

【讨论】：

【解决方案4】：

试试这个。

短小精悍，不要使用过时的函数。

$("a").click(function(){
    var el = $(this),
        prev = el.prev();

    prev.toggleClass('hide');
    el.text(prev.hasClass('hide') ? 'Show more' : 'Show less');
})

【讨论】：

【解决方案5】：

您应该使用this 来查找要切换的最接近的元素。

$("a").click(function(e) {
    var that = $(this);
    e.preventDefault();
    $(this).prev(".hide").toggle(function() {
        if ($(this).is(":visible")) {
            that.text("Show Less");
        } else {
            that.text("Show More");
        }
    });
});

【讨论】：

失踪的}伤了我的眼睛。
我不是医生，但我希望修复对您有所帮助 :)