Я пытаюсь реализовать эффект переворачивания нескольких плиток каждый раз, когда пользователь нажимает на него, это своего рода начало веб-страницы типа панели мониторинга. Как заставить событие клика работать для нескольких классов с одинаковым именем?

У всех плиток одинаковое имя класса, но в разных div-элементах «box», событие щелчка jquery, по-видимому, реализуется только в последней добавленной плитке, а остальные остаются статичными. Я не могу понять, что вызвало это, и я искал ответ повсюду. Это последняя версия кода события click:

var i = 0,
abbrs = document.getElementsByClassName("tile"),
len = abbrs.length;

function addEvent(abbr) {
    abbr.addEventListener("click", function(event) {
        $(this).toggleClass("flip");
    })

}

for (i; i < len; i++){

    addEvent(abbrs[i]);
}

Я не могу понять, где корень проблемы.

3
user11439800 2 Май 2019 в 07:23

3 ответа

Лучший ответ

Рассмотрите этот Codepen для чистого решения JavaScript.

<p class="target">flip me</p>
<p class="target">flip me</p>
<p class="target">flip me</p>

.flipped {
  color: red;
}

const targets = document.getElementsByClassName('target');
for (var i = 0; i < targets.length; i++) {
    targets[i].addEventListener('click', function(){
        this.classList.toggle("flipped");
    })
}

Или рассмотрите это для решения jQuery.

<p class="target">flip me</p>
<p class="target">flip me</p>
<p class="target">flip me</p>

.flipped {
  color: red;
}

$('.target').on('click', function() {
  $(this).toggleClass('flipped');
});

РЕДАКТИРОВАТЬ:

Посмотрев на данный код, я только что понял, что вы размещаете абсолютные дивы через очень большие отступы, что не является правильным способом. Скорее используйте top|right|bottom|left для позиционирования (см. Здесь документы ) . После изменения CSS ваш пример работает полностью, даже с грязным JavaScript. Посмотрите здесь

1
M8RTAL 2 Май 2019 в 22:18

Примечание: вот основной фрагмент, который вам нужно сделать. нажав на все классы, перечисленные функции вызова для вызова показать эффекты. если вы не хотите показывать эффекты, не добавляйте класс.

function callMe(){
    if ($(this).hasClass('flip')){
        $(this).removeClass('flip');//removes flip class
    } else {
         $(this).addClass('flip');//add flip class
    }
}

$(".class1, .class2").click(callMe); //add classes here needs to give effects and call functions
.flip{
  color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="class1">Class 1</div>
<span class="class2">Class 2</span>
1
Parth Raval 2 Май 2019 в 04:43

Я думаю, что замена фрагмента, который вы предоставили этим кодом, должна сделать это для вас:

    $(document).ready(function() {
        $(".tile").click(function() {         
            $(".tile").toggleClass("flip");
        });
    });

В зависимости от того, где на самом деле находится код в вашем проекте, вам может не потребоваться прослушиватель событий $(document).ready(), который заключает в себе прослушиватель событий «при нажатии».

0
Yves Gurcan 2 Май 2019 в 04:46