Javascript: jQuery $ (this) inside map() function

-3

Я пытаюсь реплицировать селектор jQuery $ (this) внутри чистой функции javascript map(). Я хочу слушать onclick ли и применить фоновое изображение к этому конкретному ли.

Вот мой код, но здесь, «это» не возвращает щелкнул Li элемент:

var squares = document.getElementsByClassName('box'); //returns an HTML Collection of 9 lis 

      function myEvent(event) { 
       squares = Array.prototype.slice.call(squares); //converts HTML collection to an Array 
       squares.map(function(x, index) { 

        if (event.type === "click") { 
        this.style.backgroundImage = 'url(img/' + app.imagePath() + '.svg)'; 
        } 

       }, this); 
       } 
    squares.addEventListener("click", myEvent(), false);

Любые предложения?

источник

2017-02-10 Nicolas

Не могли бы вы описать конкретную ошибку, что вы имеете, вместо того, чтобы "не работает" сценарии типа? –

http://www.w3schools.com/js/js_htmldom_eventlistener.asp – Yuri

как вы привязываете событие click к ли? –

Пожалуйста, проверьте это:

Вместо этого:

this.style.backgroundImage....

Используйте это:

event.target.style.backgroundImage

и последнее это так изменить, что event.atrget

источник

2017-02-10 13:45:32

Спасибо, брат, но, пожалуйста, обратите внимание на ответ Эндрю. Это ваша другая проблема. –

squares является список элементов (https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection). Вы должны цикла результаты:

for(var i =0; i< squares.length; i++) { 
    squares[i].addEventListener("click", myEvent, false); 
}

также вы передаете функцию реф, не сдавшие результат функции (убрать скобки после myEvent в addEventListener)

Также согласно zer00ne awnser, все функция события должна выполнять следующие действия:

function myEvent(event) { 
    this.style.backgroundImage = 'url(img/' + app.imagePath() + '.svg)'; 
}

источник

2017-02-10 13:47:57

Использование делегирования событий путем регистрации события щелчка на родительском элементе всех этих элементов. Детали комментируются в Snippet. Он просто включает в себя ONE eventListener и он будет охватывать ВСЕ элементы, которые вы можете щелкнуть.

SNIPPET

var base = document.getElementById('base'); 
 

 
// When base is clicked... 
 
base.addEventListener('click', function(event) { 
 
    /* When an event fires it goes down from base... 
 
    || to the very bottom element which is any of .. 
 
    || the squares. The one that's clicked at the... 
 
    || bottom is called event.target. It's determined... 
 
    || by comparing the other elements in the event... 
 
    || chain. All elements that are in the event chain... 
 
    || are refered by the event.currentTarget property 
 
    */ 
 
    if (event.target !== event.currentTarget) { 
 
    var target = event.target; 
 
    target.style.backgroundImage = 'url(http://imgh.us/Lenna.png)'; 
 
    target.style.backgroundSize = 'contain'; 
 
    } 
 
}, false);

.box { 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 2px dashed red; 
 
    cursor: pointer; 
 
}

<section id='base'> 
 
    <div class='box'></div> 
 
    <div class='box'></div> 
 
    <div class='box'></div> 
 
    <div class='box'></div> 
 
    <div class='box'></div> 
 
    <div class='box'></div> 
 
    <div class='box'></div> 
 
    <div class='box'></div> 
 
    <div class='box'></div> 
 
    <div class='box'></div> 
 
    <div class='box'></div> 
 
    <div class='box'></div> 
 
    <div class='box'></div> 
 
    <div class='box'></div> 
 
    <div class='box'></div> 
 
</section>

источник

2017-02-10 14:02:52 zer00ne

Javascript: jQuery $ (this) inside map() function

ответ

Смежные вопросы