Question

我正在尝试编写一个jQuery函数，该函数将触发在脚本中其他位置可见的新div。然后，该函数将仅隐藏当前版本之前的div（具有不同的类名）。

到目前为止，我有以下内容：

$(".next-question-button").on('click', function (e) {
    if ($('.question-bar').next().css('display', 'block');) {
        $(this).('.question-bar').hide();
    }
});

HTML：

<div class="question-bar">Question 1</div>
<div class="question-div">
    <div class="next-question-div">
        <button type="button" class="next-question-button">Next Question</button>
    </div>
</div>

<div class="question-bar">Question 2</div>
<div class="question-div">
    <div class="next-question-div">
        <button type="button" class="next-question-button">Next Question</button>
    </div>
</div>

<div class="question-bar">Question 3</div>
<div class="question-div">
    <div class="next-question-div">
        <button type="button" class="next-question-button">Next Question</button>
    </div>
</div>

我的想法是，如果点击下一个问题按钮，新的div将会显示，然后是＆＃39; div.question-bar＆＃39;紧接在新div之前的那个会隐藏吗？

新的div是div.question-bar的兄弟，但文档中有几个。因此，当新的div可见时，我只想隐藏上一个div（类名question-bar）？

最好的方法是什么？提前致谢

Answer 1

正如你在很多SO问题上找到的那样，.next给出了下一个元素，无论它是什么类。如果你添加一个类，它仍然是下一个类，但只有当下一个类与过滤器匹配时否则为null - 它不会继续，直到它找到匹配的元素，即.nextAll(".class").first()。

这也适用于.prev

所以，如果你正在使用.next / .prev，那么就没有必要担心“但是文档中有几个”。

您当前的流程是：

点击按钮
找到下一个div，显示div
从该div（下一个），找到前一个并隐藏它

你已经知道了之前的那个，因为它是你刚刚点击按钮的那个。

所以相反：

点击按钮
隐藏按钮的 s
显示下一个 s

即，对于这个html：

<div class="question-bar">Question 1</div>
<div class="question-div">
    <div class="next-question-div">
        <button type="button" class="next-question-button">Next Question</button>
    </div>
</div>

<div class="question-bar">Question 2</div>
<div class="question-div">
    <div class="next-question-div">
            <button type="button" class="next-question-button">Next Question</button>
    </div>
</div>

你得到：

$(".next-question-button").on("click", function() {

    // get the container for this button
    var div = $(this).closest(".question-div");

    // hide this container as we're moving on to the next question
    div.hide();

    // also hide the question 1 bar
    div.prev().hide();

    // show the next question bar and div
    // .next() is applied at the .question-div level so gives the next .question-bar (no filter required)
    div.next().show();

    // it goes bar-div-bar-div so at the first bar, the second bar is next/next
    // this will *not* work: div.next(".question-div")
    div.next().next().show();

    // an alternative that will work and may be better than .next.next
    //div.nextAll(".question-div").first().show();
});

其中.closest找到包含问题栏。

Answer 2

这样的东西？

＆＃13;

$(function() {
  $(".next-question-button").on('click', function() {
    $parent = $(this).parents('.question-div');
    $parent.hide();
    $parent.prev('.question-bar').hide();

    $parent.next('.question-bar').show();
    $parent.next('.question-bar').next('.question-div').show();
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="question-bar">Question 1</div>
<div class="question-div">
  <div class="next-question-div">
    <button type="button" class="next-question-button">Next Question</button>
  </div>
</div>

<div class="question-bar">Question 2</div>
<div class="question-div">
  <div class="next-question-div">
    <button type="button" class="next-question-button">Next Question</button>
  </div>
</div>

<div class="question-bar">Question 3</div>
<div class="question-div">
  <div class="next-question-div">
    <button type="button" class="next-question-button">Next Question</button>
  </div>
</div>

＆＃13;

查看下一个div的jQuery函数是可见的，并在点击

2 个答案: