我在 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");

但在這種情況下，只有第二張卡會打開，如果我點擊 header1 上的 header2 也沒關系。

那么我的問題是什么？

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);