为什么这小段代码不能按预期工作？ （JS for loop＆amp;'this'关键字）

Question

我做了一个非常小的小提琴来帮助自己在这里获得帮助，我也在那里做了描述但我仍然会在这里描述...感谢你的时间，感谢一切！

看起来我需要点击按钮，然后点击div 为了得到欲望的结果，我需要的是以下......

要点击按钮，也不需要点击div 加载'.innerHTML'

在实际代码中它是一个ajax加载，它只有在我点击两者时才有效， 按钮和div。我想保留它香草JS，我曾经在这里使用jQuery。

HTML：

<div class="divs">
  <!--- content loads here-->
</div>
<button class="button">Button 1</button>

<br>
<br>

<div class="divs">
  <!--- content loads here-->
</div>
<button class="button">Button 2</button>

<br>
<br>

<div class="divs">
  <!--- content loads here-->
</div>
<button class="button">Button 3</button>

JS

var button = document.querySelectorAll('.button');
for (var i = 0; i < button.length; i++) {
  button[i].addEventListener('click', my_function, false);
}


// I want to run this function without the addEventListener.
function my_function() {
  var name_test = document.querySelectorAll('.divs');
  for (var i = 0; i < name_test.length; i++) {
    name_test[i].addEventListener("click", inner_function, false);

    function inner_function() {
      this.innerHTML = "surprise!";
    }
  }
}

https://jsfiddle.net/0zLkx2jo/

Answer 1

您说您不想点击div元素，因此不要将div事件监听器添加到div元素，点击按钮进行更新处理程序。

在按钮单击处理程序中，this将是对单击按钮的引用，您可以使用DOM导航属性/方法从中获取相关的DIV - 对于您的特定HTML结构{{3你想要的是什么：

＆＃13;

＆＃13;

var button = document.querySelectorAll('.button');
for (var i = 0; i < button.length; i++) {
  button[i].addEventListener('click', my_function, false);
}

function my_function() {
  this.previousElementSibling.innerHTML = "surprise!";
}

＆＃13;

<div class="divs"><!--- content loads here--></div>
<button class="button">Button 1</button>

<br><br>

<div class="divs"><!--- content loads here--></div>
<button class="button">Button 2</button>

<br><br>

<div class="divs"><!--- content loads here--></div>
<button class="button">Button 3</button>

＆＃13;

＆＃13;

＆＃13;