使用相同的JavaScript用于不同的div

Question

我有一样的东西：

<div id="div1"><?php include 'test.php'; ?></div> 
<div id="div2"><?php include 'test.php'; ?></div> 

和test.php是：

<button onclick="myFunction()">test</button> 

我怎么能分别援引myFunction为div1和div2？我的意思是，如果我点击div1中的按钮，myFunction只能在该div中完成。我发现了this javascript关键字，但我无法正确应用它。

请勿使用jQuery。

Answer 1

检查下面的代码

<button onclick="myFunction.bind(this)">test</button> 

Answer 2

您可以在函数中添加的参数。

<div id="div1"><?php $button=1; include 'test.php'; ?></div> 
<div id="div2"><?php $button=2; include 'test.php'; ?></div> 

和你的PHP：

<button onclick="myFunction(<?php echo $button;?>)">test</button> 

所以，现在你可以使用这个参数知道被按下哪个按钮。

Answer 3

您可以通过上下文的函数调用方法，像这样：

<button onclick="myFunction.call(this)">test</button> 

然后，在你的功能，你可以通过使用this.parentElement检索div元素。

function myFunction() { 
 
    document.getElementById('result').innerHTML = this.parentElement.id; 
 
}

<div id="div1"><button onclick="myFunction.call(this)">test</button></div> 
 
<div id="div2"><button onclick="myFunction.call(this)">test</button></div> 
 

 
<div id="result"></div>

Answer 4

这里有一个解决方案：

function myFunction(ev) { 
 
\t console.log(ev.target.parentNode.id); 
 
}

<div id="div1"> 
 
    <button onclick="myFunction(event)">button 1</button> 
 
</div> 
 
<div id="div2"> 
 
    <button onclick="myFunction(event)">button 2</button> 
 
</div>

您可以在event对象，通过它你再收到点击target和其parentNode传球，即更正对应div。