2

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

5 回答 5

2

你可以这样做 ：

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

示范

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

于 2013-06-06T14:30:15.833 回答
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/

于 2013-06-06T14:30:58.213 回答
0 
$(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');
    });
});

小提琴

于 2013-06-06T14:29:06.397 回答
0

您应该使用它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");
        }
    });
});
于 2013-06-06T14:29:40.700 回答
0

尝试这个。

简短，甜蜜，不要使用过时的功能。

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

    prev.toggleClass('hide');
    el.text(prev.hasClass('hide') ? 'Show more' : 'Show less');
})
于 2013-06-06T14:31:10.510 回答