Моя переменная в Jquery не работает так, как я хочу - PullRequest
Новая
       15

Моя переменная в Jquery не работает так, как я хочу

0 голосов
/ 18 марта 2020

Этот код использует функцию аккордеона только на смартфонах и работает хорошо.

Мой 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.

Так в чем моя проблема?

1 Ответ

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

Убедитесь, что ваша переменная 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 l oop

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