Question

我在选择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

Answer 1

你可以这样做：

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

Demonstration

请注意，已弃用使用两个函数作为参数的toggle。建立垫片很容易，但通常不需要它。

Answer 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/

Answer 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

Answer 4

您应该使用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");
        }
    });
});

Answer 5

试试这个。

简短，甜美，不使用贬值功能。

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

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

jQuery中的兄弟元素

5 个答案: