Вызов функции onClick для нескольких элементов

Я проверил некоторые другие сообщения здесь, но все еще не мог заставить эту проблему работать. У меня есть несколько элементов в моем html с классом cardContainer:

<div class="cardContainer">
<div id="card2" class="block" onclick="changeClass()">
</div>
</div>


<div class="cardContainer">
<div id="card3" class="block" onclick="changeClass()">
</div>
</div>

Для каждого события onClick я хотел бы вызвать эту функцию JS:

<script type="text/javascript"> 
function changeClass(){
if(document.getElementById("card2").className == "block")
document.getElementById("card2").className += " rotated";

else
document.getElementById("card2").className = "block";
}
</script>

Что я хотел бы сделать, так это включить идентификатор card3, чтобы он запускал ту же функцию при нажатии. Как я могу объединить идентификаторы «card2» и «card3» в javascript, чтобы функция работала?

Я понимаю, что если я использую getElementById, я могу получить только один, а не несколько идентификаторов/классов, но я безуспешно пытался использовать, например, getElementsByClassName. Также просмотрел другие сообщения, но не смог заставить это работать на основе предложений... Я новичок в Javascript и не совсем уверен, как к этому подойти.

Спасибо за вашу помощь!


javascript getelementsbyclassname getelementbyid
person user2163224    schedule 19.06.2014    source источник
comment
Что ты пытаешься сделать?   -  person tymeJV    schedule 19.06.2014
comment
Непонятно, что вы пытаетесь здесь сделать. Во-первых, вы получаете элемент по id card2, а в разметке у вас нет card2. Обязательно включите весь свой код и объясните, чего вы пытаетесь достичь.   -  person KingOfHypocrites    schedule 19.06.2014
comment
getElementById предназначен для использования с уникальными идентификаторами. С getElementsByClassName вы получите не идентификаторы, а классы.   -  person Eder    schedule 19.06.2014

Ответы (4)


arrow_upward
1
arrow_downward

Вы можете передать идентификатор div, на который нажали, на вашу функцию changeClass:

<div id="card3" class="block" onclick="changeClass(this.id)">

Таким образом, вам будет проще управлять процессом переключения классов:

function changeClass(id) {
    var div = document.getElementById(id);
    switch (id) {
        case "card2": {
            if (div.className == "className") {
                div.className = "anotherClassName";
            }

            break;
        }
        case "card3": {
            if (div.className == "block") {
                div.className = "rotated";
            }

            break;
        }

        default: {
            // any other case
        }
    }
}
person Eder    schedule 19.06.2014
comment
Спасибо, но где бы я разместил оператор else. Какова структура добавления других случаев и оператора else? Спасибо Эдер! - person user2163224; 19.06.2014
comment
Пожалуйста, найдите выше обновленный код, показывающий, как добавлять новые случаи. Если вам нужно подробное описание оператора switch в javascript, ознакомьтесь с документацией: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/ - person Eder; 19.06.2014
comment
Спасибо, Эдер, это прекрасно! Я использовал это так: function changeClass(id) { var div = document.getElementById(id); switch (id) { case "card2": { if(document.getElementById("card2").className == "block") document.getElementById("card2").className += " rotated"; else { document.getElementById("card2").className = "block"; } break; } case "card3": { if(document.getElementById("card3").className == "block") document.getElementById("card3").className += " rotated"; else { document.getElementById("card3").className = "block"; } break; } } } Спасибо! - person user2163224; 19.06.2014

arrow_upward
4
arrow_downward

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

HTML

<div class="cardContainer">
    <div class="card block">Click Here</div>
    <div class="card block">Click Here</div>
    <div class="card block">Click Here</div>
</div>

JavaScript

var cards = document.querySelectorAll(".card");
for (var i = 0; i < cards.length; i++) {
    var card = cards[i];
    card.onclick = function () {
        if (this.classList.contains("block")) {
            this.classList.add("rotated");
            this.classList.remove("block");
        }
        else {
            this.classList.add("block");
            this.classList.remove("rotated");
        }
    };
}

Вот демонстрация

Таблица совместимости для поддержки querySelector/querySelectorAll: Можно ли использовать

person super    schedule 19.06.2014
comment
Это было именно то решение, которое мне было нужно. Спасибо! - person thamind; 02.05.2019

arrow_upward
0
arrow_downward

используйте document.getElementsByClassName (не работает на ie‹9 или FF‹3), если вам не нужны старые браузеры, и если вы это сделаете, я предлагаю вам использовать jquery или просто sizzle.js для использования селекторов css

person Dayan Moreno Leon    schedule 19.06.2014

arrow_upward
0
arrow_downward

Я думаю, вы ищете что-то вроде этого?. (при условии, что вы согласны с использованием jQuery)

http://jsfiddle.net/LqpKt/

<div class="cardContainer">
  <div id="card1" class="block"></div>
</div>
<div class="cardContainer">
  <div id="card2" class="block"></div>
</div>
<div class="cardContainer">
  <div id="card3" class="block"></div>
</div>

<div id="output"></div>

$('.cardContainer').click(function(e){
    var name = $(this).find('.block').attr('id');
    $('#output').append($('<div>').html('clicked ' + name));
})
person Trent    schedule 19.06.2014
comment
Спасибо, Трент, но я не уверен, для чего нужен выходной идентификатор? ВСЕ, что я хочу сделать, это запустить функцию при щелчке каждого элемента в простом javascript. Пожалуйста, порекомендуйте. Спасибо! - person user2163224; 19.06.2014