Question

我为切换按钮写了jquery ......

$(document).ready(function(){
    /* Needs to be re-written for multiple questions */
    $(".full_question").hide();
    $('.question a').after('<a class="show_full_question" href="#">more</a>');

    $('.show_full_question').click(function() {
    var el = this;
        $(".full_question").toggle(function() {
            $(el).text($(el).text() == 'less' ? 'more' : 'less');
            $(el).toggleClass("hide_full_question");
        });
    });
});

它在完整的问题宽度和部分宽度之间切换。但是当点击它时，它会切换页面上的所有问题。我怎么才能让它只切换一个呢？

我知道它与$（this）有关但不知道它在哪里......我不介意在必要时更改html。

html是......

<h3 class="question">
  <a href="#">What size is the circumference of the earth? I don't really know what it is! Help me! What size is the...
    <span class="full_question"> circumference of the earth? I really don't know!</span>
  </a>
</h3>

Answer 1

问题是$(".full_question").toggle()，将使用full_question类切换所有元素。您需要以某种方式将当前单击的元素与正确的full_question链接起来。

由于您在同一个父级下有一个full_question和一个show_full_question按钮，因此您可以使用jQuery获取父级并找到要切换的问题：

$(this).parent().find(".full_question").toggle()

如果您确定HTML结构不会改变，您也可以这样做：

$(this.previousSibling.childNodes[1]).toggle()

jQuery切换更多按钮切换多个div

1 个答案:

这是jsfiddle example。