如何在我的 HTML 标记中使用 JQuery 设置变量答案

【问题标题】：How can I set variables with JQuery in my HTML Markup如何在我的 HTML 标记中使用 JQuery 设置变量
【发布时间】：2020-06-30 20:54:30
【问题描述】：

我正在研究 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_toggle 和标题和折叠中写而不是 h3_toggle1 或 heading1 和 collapse1 ...。

所以我想改变我的 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)); 
  }
});

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

【问题讨论】：

在调用 resize 函数之前获取卡片数量，然后将其传递给 resize 而不是硬编码数字。

标签： jquery loops for-loop variables collapse

【解决方案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));
   }
 }
});

【讨论】：

您好，非常感谢您的回答！这很有趣，因为我点击哪个标题（h3_toggle1 oder h3_toggle2）并不重要，它只是第二张卡片展开。你知道为什么吗？
只需停止在 for 循环中使用 var，就像您所做的那样：for (var i = 1; i
wesbos.com/for-of-es6 - 这是for-loops差异描述中的var-let
我明白了。所以我使用了你的代码，但它仍然不起作用。

【解决方案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);

    }
  });
});

【讨论】：