如何在 HTML 标记中使用 JQuery 设置变量

Question

正在研究 Bootstrap 的手风琴功能，应该只能在智能手机上看到。现在我想自动化我的代码。

这是我的 HTML 标记：

<div id="accordion" class="container">
    <div class="card-deck">    
        <div class="card">
            <div class="card-header" id="heading1">
                <h3 class="h3_toggle1">Titel 1</h3>
            </div>
            <div id="collapse1">
                <div class="card-body">Content 1</div>
            </div>
        </div>

        <div class="card">
            <div class="card-header" id="heading2">
                <h3 class="h3_toggle2">Titel 2</h3>
            </div>
            <div id="collapse2">
                <div class="card-body">Content 2</div>
            </div>
        </div>
    </div>
</div>

这是 JS 代码：

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


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

这很好用。但是每次添加一张新卡我都必须添加卡号，但我想写而不是 h3_toggle1 或 heading1 和 collapse1 ...在 h3_toggle 和标题和折叠中。

所以我只想更改我的 HTML 标记，JS 代码很好，只是想更改这部分：

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

在：

   $(window).resize(function() {
   if ($(window).width() <= 768) {
    collapse(i);
  } else {
    expand(i);
  }
});

我该怎么做？

我试过这个解决方案：

   $(window).resize(function() {
   if ($(window).width() <= 768) {
    for (var i = 1; i <= 2; i++) collapse(i);
   $(".h3_toggle").addClass("h3_toggle"+(i)); 
  } else {
    for (var i = 1; i <= 2; i++) expand(i);
   $(".h3_toggle").addClass("h3_toggle"+(i)); 
  }
});

但是我不知道为什么它不起作用。

Answer 1

试试这个：

$(window).resize(function() {
 if ($(window).width() <= 768) {
   for (let i = 1; i <= 2; i++) {
    collapse(i);
    $(".h3_toggle").addClass("h3_toggle"+(i));
   }

  } else {
   for (let i = 1; i <= 2; i++)  {
    expand(i);
    $(".h3_toggle").addClass("h3_toggle"+(i));
   }
 }
});

Answer 2

这个有效：

$(document).ready(function () {

var i = 0;
$(".h3-toggle").each(function () {
  i++;
  $(this).addClass("h3-toggle" + (i));
  $(this).parent().attr("id", "heading" + (i));
  $(this).parent().next().attr("id", "collapse" + (i));
  //alert(1);
  //alert($(window).width());
  if ($(window).width() <= 575) {
    collapse(i);
  } else {
    expand(i);
  }
});

});


$(window).resize(function () {
var i = 0;
$(".h3-toggle").each(function () {
  i++;
  if ($(window).width() <= 575) {
    collapse(i);
  } else {
    expand(i);

    }
  });
});

如何在 HTML 标记中使用 JQuery 设置变量

How can I set variables with JQuery in my HTML Markup

jquery

loops

for-loop

variables

collapse