я могу сделать функцию "onClick" в цикле for? - PullRequest
Новая
       3

я могу сделать функцию "onClick" в цикле for?

0 голосов
/ 16 мая 2018

Я сделал html-страницу, где вы нажимаете и активируете функцию по id html-элемента. Это заняло у меня много строк в JavaScript. могу ли я замкнуть цикл for?

это мой HTML-код: 

<ul>    
    <li class="card" id="c0"><img id="i0" src="images\westren_wall.jpg"></li>
    <li class="card" id="c1"><img id="i1" src="images\westren_wall.jpg"></li>
    <li class="card" id="c2"><img id="i2" src="images\idf.jpg"></li>
    <li class="card" id="c3"><img id="i3" src="images\idf.jpg"></li>
    <li class="card" id="c4"><img id="i4" src="images\jerusalem.jpg"></li>
    <li class="card" id="c5"><img id="i5" src="images\jerusalem.jpg"></li>
    <li class="card" id="c6"><img id="i6" src="images\sixDays.jpg"></li>
    <li class="card" id="c7"><img id="i7" src="images\sixDays.jpg"></li>
    <li class="card" id="c8"><img id="i8" src="images\BGurion.jpg"></li>
    <li class="card" id="c9"><img id="i9" src="images\BGurion.jpg"></li>
    <li class="card" id="c10"><img id="i10" src="images\hertzel.png"></li>
    <li class="card" id="c11"><img id="i11" src="images\hertzel.png"></li>
    <li class="card" id="c12"><img id="i12" src="images\vaizman.png"></li>
    <li class="card" id="c13"><img id="i13" src="images\vaizman.png"></li>
    <li class="card" id="c14"><img id="i14" src="images\menora.jpg"></li>
    <li class="card" id="c15"><img id="i15" src="images\menora.jpg"></li>
    <li class="card" id="c16"><img id="i16" src="images\knesset.jpg"></li>
    <li class="card" id="c17"><img id="i17" src="images\knesset.jpg"></li>

Я использую это сделать активную функцию при нажатии на этот код JavaScript: 

document.getElementById("c0").onclick = function(){openCard("i0",1)};
    document.getElementById("c1").onclick = function(){openCard("i1", 1)};
    document.getElementById("c2").onclick = function(){openCard("i2",2)};   
    document.getElementById("c3").onclick = function(){openCard("i3",2)};
    document.getElementById("c4").onclick = function(){openCard("i4",3)};
    document.getElementById("c5").onclick = function(){openCard("i5",3)};
    document.getElementById("c6").onclick = function(){openCard("i6",4)};
    document.getElementById("c7").onclick = function(){openCard("i7",4)};
    document.getElementById("c8").onclick = function(){openCard("i8",5)};
    document.getElementById("c9").onclick = function(){openCard("i9",5)};
    document.getElementById("c10").onclick = function(){openCard("i10",6)};
    document.getElementById("c11").onclick = function(){openCard("i11",6)};
    document.getElementById("c12").onclick = function(){openCard("i12",7)};
    document.getElementById("c13").onclick = function(){openCard("i13",7)};
    document.getElementById("c14").onclick = function(){openCard("i14",8)};
    document.getElementById("c15").onclick = function(){openCard("i15",8)};
    document.getElementById("c16").onclick = function(){openCard("i16",9)};
    document.getElementById("c17").onclick = function(){openCard("i17",9)};

Могу ли я замкнуть строки этого кода циклом for?

Ответы [ 5 ]

0 голосов
/ 16 мая 2018

Если вы установите настраиваемый атрибут для каждого элемента img, например data-img-index, тогда вы можете установить событие щелчка для каждого имени класса со значением card . Наконец, получите id и значение пользовательского атрибута, т.е. data-img-index, как этот способ передачи вашего openCard(id, attr); метода

Id: var id = this.children[0].id;

Пользовательский Atr: var attr = this.children[0].attributes['data-img-index'].nodeValue;

var classname = document.getElementsByClassName("card");

for (var i = 0; i < classname.length; i++) {
  classname[i].addEventListener('click', function() {
    var id = this.children[0].id;
    var attr = this.children[0].attributes['data-img-index'].nodeValue;
    openCard(id, attr);
  });
}

function openCard(id, num) {
  console.log(id, num)
}
<html>

<body>
  <ul>
    <li class="card" id="c0"><img id="i0" data-img-index=1 src="images\westren_wall.jpg"></li>
    <li class="card" id="c1"><img id="i1" data-img-index=1 src="images\westren_wall.jpg"></li>
    <li class="card" id="c2"><img id="i2" data-img-index=2 src="images\idf.jpg"></li>
    <li class="card" id="c3"><img id="i3" data-img-index=2 src="images\idf.jpg"></li>
    <li class="card" id="c4"><img id="i4" data-img-index=3 src="images\jerusalem.jpg"></li>
    <li class="card" id="c5"><img id="i5" data-img-index=3 src="images\jerusalem.jpg"></li>
    <li class="card" id="c6"><img id="i6" data-img-index=4 src="images\sixDays.jpg"></li>
    <li class="card" id="c7"><img id="i7" data-img-index=4 src="images\sixDays.jpg"></li>
    <li class="card" id="c8"><img id="i8" data-img-index=5 src="images\BGurion.jpg"></li>
    <li class="card" id="c9"><img id="i9" data-img-index=5 src="images\BGurion.jpg"></li>
    <li class="card" id="c10"><img id="i10" data-img-index=6 src="images\hertzel.png"></li>
    <li class="card" id="c11"><img id="i11" data-img-index=6 src="images\hertzel.png"></li>
    <li class="card" id="c12"><img id="i12" data-img-index=7 src="images\vaizman.png"></li>
    <li class="card" id="c13"><img id="i13" data-img-index=7 src="images\vaizman.png"></li>
    <li class="card" id="c14"><img id="i14" data-img-index=8 src="images\menora.jpg"></li>
    <li class="card" id="c15"><img id="i15" data-img-index=8 src="images\menora.jpg"></li>
    <li class="card" id="c16"><img id="i16" data-img-index=9 src="images\knesset.jpg"></li>
    <li class="card" id="c17"><img id="i17" data-img-index=9 src="images\knesset.jpg"></li>
  </ul>
</body>

</html>
0 голосов
/ 16 мая 2018

Да, вы можете написать цикл для присоединения всех этих обработчиков.Но проще просто поместить один обработчик onclick на ul , который содержит все li s.Когда происходит щелчок, Javascript будет искать обработчики по всему списку элементов-предков (и это еще не все, но на данный момент это достаточно близко).

Затем обработчик может посмотреть оригинал«целевой» элемент, чтобы выяснить, какие именно параметры передать вашей функции opencard ().Вы можете поместить значения параметров где-то в этот элемент (возможно, в атрибут, чтобы вы могли получить их с помощью getAttribute ()), или ваш обработчик мог бы просто вычислить их.В вашем примере вы могли бы вычислить первый параметр, просто получив идентификатор целевого элемента и изменив "c" на "i"), а второй параметр немного арифметически.

0 голосов
/ 16 мая 2018

Лучший способ справиться с этим - делегировать событие: зацепить click на ul, а затем использовать e.target, чтобы обратиться к конкретному img, по которому щелкнули.Сохраните любую информацию, которая вам нужна для этого элемента: 

<ul id="list">    
    <li class="card" id="c0"><img data-card="i0" data-index="0" src="images\westren_wall.jpg"></li>
    <li class="card" id="c1"><img data-card="i1" data-index="0" src="images\westren_wall.jpg"></li>
    <li class="card" id="c2"><img data-card="i2" data-index="1" src="images\idf.jpg"></li>
    <!-- ... -->
</ul>

Тогда только один обработчик: 

document.getElementById("list").addEventListener("click", function(e) {
    openCard(e.target.getAttribute("data-card"), +e.target.getAttribute("data-index"));
});

Или, если вы предпочитаете .onclick (но нет причин, если вам не нужна поддержкадействительно устаревшие браузеры, такие как IE8): 

document.getElementById("list").onclick = function(e) {
    openCard(e.target.getAttribute("data-card"), +e.target.getAttribute("data-index"));
};

Live Пример: 

document.getElementById("list").addEventListener("click", function(e) {
    openCard(e.target.getAttribute("data-card"), +e.target.getAttribute("data-index"));
});

function openCard(card, index) {
  console.log("card = " + card + ", index = " + index);
}
<ul id="list">    
    <li class="card" id="c0"><img data-card="i0" data-index="0" src="images\westren_wall.jpg"></li>
    <li class="card" id="c1"><img data-card="i1" data-index="0" src="images\westren_wall.jpg"></li>
    <li class="card" id="c2"><img data-card="i2" data-index="1" src="images\idf.jpg"></li>
    <!-- ... -->
</ul>

На самом деле, если взглянуть на разметку еще раз, вам вообще не понадобится data-card;это родительский элемент img, поэтому: 

<ul id="list">    
    <li class="card"><img data-index="0" src="images\westren_wall.jpg"></li>
    <li class="card"><img data-index="0" src="images\westren_wall.jpg"></li>
    <li class="card"><img data-index="1" src="images\idf.jpg"></li>
    <!-- ... -->
</ul>

и 

document.getElementById("list").addEventListener("click", function(e) {
    openCard(e.target.parentNode, +e.target.getAttribute("data-index"));
});

... где вы измените openCard, поэтому он ожидает сам элемент, а неid.

Живой пример: 

document.getElementById("list").addEventListener("click", function(e) {
    openCard(e.target.parentNode, +e.target.getAttribute("data-index"));
});

function openCard(element, index) {
  // use `element` and `index` here, the following code is just for the demo:
  element.appendChild(document.createTextNode(" opened, index = " + index));
}
<ul id="list">    
    <li class="card"><img data-card="i0" data-index="0" src="images\westren_wall.jpg"></li>
    <li class="card"><img data-card="i1" data-index="0" src="images\westren_wall.jpg"></li>
    <li class="card"><img data-card="i2" data-index="1" src="images\idf.jpg"></li>
    <!-- ... -->
</ul>
0 голосов
/ 16 мая 2018

Вы можете автоматически сгенерировать как html, так и javascript.

Я использовал jquery в моем примере, но вы можете добиться этого в plain javascript также.

Удачи! 

// Generate your html
// Only specify the pictures you want to display
// The pictures are the only differences you have on your <li>
const data = [
  'images\westren_wall.jpg',
  'image2',
  'image3',
  'image4',
  'image5',
].map((x, xi) => `<li class="card" id="c${xi}"><img id="i${xi}" src="${x}"></li>`);

// Insert it into the page at the right position
$("#myData").html(data);

// trigger the clicks for each <li> having the card class
$('.card').each(function(x) {
  $(this).click(function() {
    // It will say hi when you i'll click on a <li>!
    console.log(`Hi i'm number ${this.getAttribute('id')}`);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul id="myData">
   <!-- Where the <li> are gonna get inserted -->
</ul>
0 голосов
/ 16 мая 2018

Да, вы можете сделать это намного проще: 

for(var i = 0;i <= 17;i++){
    document.getElementById("c" + i).onclick = function(){
        openCard("i" + i, Math.floor(i / 2) + 1);
    };
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...