Как я могу установить переменные с JQuery в моей HTML разметке - PullRequest
Новая
       5

Как я могу установить переменные с JQuery в моей HTML разметке

1 голос
/ 19 марта 2020

работаю над функцией аккордеона 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 и heading and collapse.

Так что я хочу изменить просто HTML Разметка, Код JS в порядке, просто хочу изменить эту часть: 

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

in: 

   $(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)); 
  }
});

Но я не знаю, почему оно не работает.

1 Ответ

0 голосов

Попробуйте это: 

$(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));
   }
 }
});
...