Интерактивное программирование JavaScript и Div

У меня есть 5 div, и я хочу, чтобы каждый из них был кликабельным и менял фон и контент в div "new"

<div class="new"><b></b>
  <button id="btn">Przeczytaj Artykułt</button>
  <div class="card" id="pierwszy"><img src="img/slajd1.png"></div>
  <div id="next">&rang;</div>
  <div id="prev">&lang;</div>
  <div id="slider"></div>
</div>
<div class="dol">
  <div class="card" id="pierwsz"><img src="slajdy/slajd1.png"></div>
  <div class="card" id="drugi"><img src="slajdy/slajd2.png"></div>
  <div class="card" id="trzeci"><img src="slajdy/slajd3.png"></div>
  <div class="card" id="czwarty"><img src="slajdy/slajd4.png"></div>
  <div class="card" id="piaty"><img src="slajdy/slajd5.png"></div>
</div>

Источник

2 ответа

Во-первых, у вас, кажется, есть один .card элемент, который не идет с другими. Я предполагаю, что вы хотите только обновить .new когда любой из остальных пяти .card элементы нажимаются, поэтому для моего примера я удалил этот элемент. Вы всегда можете использовать .dol > card в качестве селектора, если это необходимо:)

Предполагая, что вы хотите изменить фон .new когда вы нажимаете на любой элемент с классом card, что вы хотите сделать, это сначала собрать все элементы с классом card, что можно сделать с document.getElementsByClassName('card'),

Вам также нужно будет определить цель .new элемент, с document.getElementsByClassName('new')[0], Обратите внимание [0] в конце селектора, который указывает, что мы хотим первый результат. Это важно потому что document.getElementsByClassName() возвращает коллекцию элементов NodeList, и даже если есть только один результат, нам нужно явно указать, что мы хотим использовать этот.

Теперь, когда вы определили карты и цель, вам нужно перебрать каждый элемент карты, прикрепив onclick обработчик событий для каждого. for петля будет for (var i = 0; i < cards.length; i++) и обработчик будет добавлен с cards[i].onclick = function() { },

Для каждого элемента карты вы хотите изменить style.background изменить цвет фона, а .innerHTML изменить содержание.

Скобки и i в конце функции находится выражение для немедленного вызова функции (IIFE), которое запускается сразу после загрузки страницы. Это необходимо для прикрепления обработчиков событий.

Это можно увидеть в следующем:

var cards = document.getElementsByClassName('card');
var newElement = document.getElementsByClassName('new')[0];
for (var i = 0; i < cards.length; i++)(function(i) {
  cards[i].onclick = function() {
    newElement.style.background = 'red';
    newElement.innerHTML = 'modified';
  }
})(i);
<div class="new"><b></b>
  <button id="btn">Przeczytaj Artykułt</button>
  <div id="next">&rang;</div>
  <div id="prev">&lang;</div>
  <div id="slider"></div>
</div>
<div class="dol">
  <div class="card" id="pierwsz"><img src="slajdy/slajd1.png"></div>
  <div class="card" id="drugi"><img src="slajdy/slajd2.png"></div>
  <div class="card" id="trzeci"><img src="slajdy/slajd3.png"></div>
  <div class="card" id="czwarty"><img src="slajdy/slajd4.png"></div>
  <div class="card" id="piaty"><img src="slajdy/slajd5.png"></div>
</div>

Надеюсь это поможет!:)

Источник

Это может сделать это

function ChangeBackground(incomingDiv)
      {
       incomingDiv.style.background = "green";
    incomingDiv.innerHTML = "the original text wasn't good enough";
      }
    <html lang="en">
     <head>
      <title>Document</title>
     </head>
     <body>
      <div id="div1" onclick="ChangeBackground(this);">blah blah blah</div>
      <div id="div2" onclick="ChangeBackground(this);">bleh bleh bleh</div>
      <div id="div3" onclick="ChangeBackground(this);">blue blue blue</div>
     </body>
    </html>

Этот метод тоже работает, и он показывает, как различать элементы

function ChangeBackground(incomingDivId) {
    var theclickeddiv = document.getElementById(incomingDivId);
    switch (incomingDivId) {
        case "div1":
            theclickeddiv.style.background = "green";
            theclickeddiv.innerHTML = "new text for div1"
            break;
        case "div2":
            theclickeddiv.style.background = "orange";
            theclickeddiv.innerHTML = "new text for div2"
            break;
        case "div3":
            theclickeddiv.style.background = "purple";
            theclickeddiv.innerHTML = "new text for div3"
            break;
        default:
            break;
    }
}
<div id="div1" onclick="ChangeBackground(this.id);">blah blah blah</div>
<div id="div2" onclick="ChangeBackground(this.id);">bleh bleh bleh</div>
<div id="div3" onclick="ChangeBackground(this.id);">blue blue blue</div>

Источник
Другие вопросы по тегам