迭代和选择那些唯一的数字(jQuery）

Iteration and Selecting Those Unique Numbers (jQuery)

本文关键字：数字 jQuery 唯一 选择 那些 迭代      更新时间：2023-09-26

我尝试做的事情的范围：在构建时，通过yaml文件引入了各种常见问题解答，默认情况下，该文件只显示"问题"，然后单击会显示相应的"答案"。

我已经想好了如何为每个问题和每个答案添加一个唯一的类，但我不知道如何在点击问题1时切换答案1。

我感谢任何帮助！我仍在学习javascript/jquery，很容易迷路，所以如果你能帮助解释或指出我缺少的内容，我将不胜感激！

https://jsfiddle.net/texobyte/jns7v9ox/

$(".faqQuestion").each(function (i) {
    $(this).addClass("question" + (i + 1));
});
$(".faqAnswer").each(function (i) {
    $(this).addClass("answerswer" + (i + 1));
});

$("#toggle-faq h5").hide();
$("#toggle-faq").click(function () {
    $("#toggle-faq h5").slideToggle("slow", function () {});
});

您也可以尝试这样做（正如另一个答案所说，在将id"toggle-faq"更改为类之后）：

$(".toggle-faq h5").hide();
$(".toggle-faq").on('click', function () {
    if ($(this).hasClass("active")) {
        $(this).children("h5").slideToggle();
        $(this).removeClass("active");
        return;
    }
    $(".active").children("h5").slideToggle();
    $(".active").removeClass("active");
    $(this).addClass("active");
    $(this).children("h5").slideToggle();
});

"this"意味着它只会切换已点击的.toolgle常见问题，而不是所有问题。

我已经为Fiddle做了一些修改，使其能够工作。这是链接

我已经用class="toggle-faq"替换了id="toggle-faq"；我们不应该重复ids:

<div class="toggle-faq">

还替换了此代码：

$("#toggle-faq h5").hide();
$("#toggle-faq").click(function () {
     $("#toggle-faq h5").slideToggle("slow", function () {});
});

有了更好的工作代码：

// hide all answers at first
$( '.faqAnswer' ).hide();
$( '.toggle-faq' ).on('click', function () {
    var $this = $(this);
    // if this is already open
    if ( $this.hasClass('active') ) {
        return;
    };
    // close any other already open...
    if ( !!currentSelected ) {
        currentSelected.find( '.faqAnswer' ).slideToggle( 'slow' );
    };
    // ...and then open the clicked item
    $this.find( '.faqAnswer' )
        .slideToggle( 'slow', function () {
            // now, make sure this is currentSelected
            currentSelected = $this;
        });
});

如果你有任何疑问，请告诉我。祝你好运，玩得开心！

相关文章：