Jquery 中的变量无法正常工作

Question

此代码仅在智能手机上使用手风琴功能并且运行良好。

我的HTML代码：

<div id="accordion" class="container">
    <div class="card-deck">

        <div class="card">
            <div class="card-header" id="heading1">
                <h3 class="h3_toggle" data-toggle="collapse" data-target="#collapse1" aria-expanded="true"
                    aria-controls="collapse1">Titel 1</h3>
            </div>
            <div id="collapse1" class="collapse show" aria-labelledby="heading1" data-parent="#accordion">
                <div class="card-body">Content 1</div>
            </div>
        </div>

        <div class="card">
            <div class="card-header" id="heading2">
                <h3 class="h3_toggle" data-toggle="collapse" data-target="#collapse2" aria-expanded="false"
                    aria-controls="collapse2">Titel 2</h3>
            </div>
            <div id="collapse2" class="collapse show" aria-labelledby="heading2" data-parent="#accordion">
                <div class="card-body">Content 2</div>
            </div>
        </div>

    </div>
</div>

我的JS代码是这样的：

var auto = $(".h3_toggle").addClass(function (i) {
    return "h3_toggle" + (i + 1);
});

$(window).resize(function () {
    if ($(window).width() <= 768) {
        $(".h3_toggle1").attr("data-toggle", "collapse").attr("data-target", "#collapse1").attr("aria-expanded", "false").attr("aria-controls", "collapse1");
        $("#collapse1").addClass("collapse");
        $("#collapse1").attr("aria-labelledby", "heading1").attr("data-parent", "#accordion");

        $(".h3_toggle2").attr("data-toggle", "collapse").attr("data-target", "#collapse2").attr("aria-expanded", "false").attr("aria-controls", "collapse2");
        $("#collapse2").addClass("collapse");
        $("#collapse2").attr("aria-labelledby", "heading2").attr("data-parent", "#accordion");
    } else {
        $(".h3_toggle1").removeAttr("data-toggle").removeAttr("data-target").removeAttr("aria-expanded").removeAttr("aria-controls");
        $("#collapse1").removeClass("collapse");
        $("#collapse1").removeAttr("aria-labelledby").removeAttr("data-parent");

        $(".h3_toggle2").removeAttr("data-toggle").removeAttr("data-target").removeAttr("aria-expanded").removeAttr("aria-controls");
        $("#collapse2").removeClass("collapse");
        $("#collapse2").removeAttr("aria-labelledby").removeAttr("data-parent");
    }
});

这个点很管用。但是我想自动化我的 JS 代码并改为编写这个

$('.h3_toggle1').attr("data-toggle", "collapse").attr("data-target", "#collapse1").attr("aria-expanded", "false").attr("aria-controls", "collapse1");

这样写：

$(auto).attr("data-toggle", "collapse").attr("data-target", "#collapse1").attr("aria-expanded", "false").attr("aria-controls", "collapse1");

但在这种情况下，只有第二张卡片会打开，如果我在 header2 上单击 header1 也没关系。

那么我的问题是什么？

Answer 1

看到您的 auto 变量包含所有 h3_toggle 元素。因此，当您调用 $(auto).attr 时，您同时为所有元素设置相同的属性，在这种情况下，两张卡片都将设置为相同的目标 #collapse1.

要减少代码，您可以创建如下函数：

function collapse(n) {
  $(".h3_toggle" + n)
    .attr("data-toggle", "collapse")
    .attr("data-target", "#collapse" + n)
    .attr("aria-expanded", "false")
    .attr("aria-controls", "collapse" + n);
  $("#collapse" + n)
    .addClass("collapse")
    .attr("aria-labelledby", "heading" + n)
    .attr("data-parent", "#accordion");
 }
 function expand(n) {
   $(".h3_toggle" + n)
     .removeAttr("data-toggle")
     .removeAttr("data-target")
     .removeAttr("aria-expanded")
     .removeAttr("aria-controls");
   $("#collapse" + n)
     .removeClass("collapse")
     .removeAttr("aria-labelledby")
     .removeAttr("data-parent");
 }

然后调用它：

if ($(window).width() <= 768) {
  collapse(1);
  collapse(2);
} else {
  expand(1);
  expand(2);
}

或使用for循环

for (var i = 1; i <= 2; i++) collapse(i);

Jquery 中的变量无法正常工作

My variable in Jquery is not working as I want

javascript

variables

jquery

equals