Javascript:jQuery$（this）inside map（）函数

我试图在纯javascript map（）函数中复制$（this）jQuery选择器。 我想听一听一个li的点击，并将背景图像应用于该特定li

这是我的代码，但这里的“this”不返回单击的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);

有什么建议吗？

请测试一下：

与此相反：

this.style.backgroundImage....

使用以下命令：

event.target.style.backgroundImage

---

最后一个更改是event.atrget

squares

是元素列表（）。您需要循环结果：

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

---

通过在所有这些元素的父元素上注册单击事件来使用事件委派。详细信息在代码段中注释。它只涉及一个事件监听器，它将覆盖所有你想要的可点击元素

片段

var base=document.getElementById（'base'）；
//单击“基础”时。。。
base.addEventListener（'click'，函数（事件）{
/*当一个事件触发时，它会从底部向下移动。。。
||到最底层的元素，该元素为。。
||方格。那个在。。。
||底部称为event.target。它已确定。。。
||通过比较事件中的其他元素。。。
||事件链中的所有元素。。。
||由event.currentTarget属性引用
*/
if（event.target！==event.currentTarget）{
var target=event.target；
target.style.backgroundImage='url(http://imgh.us/Lenna.png)';
target.style.backgroundSize='contain'；
}
}，假）
.box{
宽度：100px；
高度：100px；
边框：2个红色虚线；
光标：指针；
}

你能描述一下你正在发生的具体错误，而不是“不工作”类型的场景吗？你如何将点击事件绑定到li？addEventListener不能解决问题，我需要返回被点击的li…
squares.addEventListener（“click”，myEvent（），false）您在此处执行
myEvent
，而不是传递它
squares.addEventListener（“单击”，myEvent，false）
如果您对
此
仍有问题，请在代码中添加
控制台.log（…）
和
调试器
，以根据需要检查
此
和
事件
对象。谢谢兄弟，但请注意Andrew的回答。这是你的另一个问题。
function myEvent(event) {
    this.style.backgroundImage = 'url(img/' + app.imagePath() + '.svg)';
}