我已将相同的功能分配给2个不同的div元素。我希望函数确定通过其ID调用哪个div元素的函数。没有jquery。
我只是不确定如何比较if语句中的值。
<head>
<script>
var x = document.getElementById('one')
var y = document.getElementById('two')
function foo(){
if(????){
x.style.color='red'
}
else if(????){
y.style.color='red'
}
}
</script>
<style>
#one, #two{width:50px; height:50px; border: solid black 5px;}
</style>
</head>
<div id='one' onclick='foo()'>hello</div>
<div id='two' onclick='foo()'>world</div>
基本上有div'one'|| “两个”调用函数foo()并更改了负责ID的属性之一。
答案 0 :(得分:2)
传递event
对象并通过currentTarget
获取元素:
function foo(e){
const currEl = e.currentTarget;
if (currEl.id === 'one') {
currEl.style.background = 'red';
}
if (currEl.id === 'two') {
currEl.style.background = 'green';
}
}
<div id='one' onclick='foo(event)'>hello</div>
<div id='two' onclick='foo(event)'>world</div>
答案 1 :(得分:0)
如果我没记错的话,建议不要使用内联js。
您可以这样:
将html更改为此:
<div class="mycatchid" id='one' >hello</div>
<div class="mycatchid" id='two' >world</div>
并使用此js:
[...document.querySelectorAll('.mycatchid')].forEach(elem =>{
elem.addEventListener('click', function(){
if(this.id == 'one') { console.log(this.id)}
else console.log(this.id);
})
});
在es6中完成的一些注释可以检查一个实时示例:https://jsfiddle.net/jrzh9wxL/
答案 2 :(得分:0)
您可以将div的ID传递给foo。
<div id='one' onclick='foo(this.id)'>hello</div>
<div id='two' onclick='foo(this.id)'>world</div>
然后您可以像下面这样在foo函数中使用给定的ID:
function foo(id) {
document.getElementById(id).style.color = 'red';
}
function foo(id) {
document.getElementById(id).style.color = 'red';
}
#one, #two{width:50px; height:50px; border: solid black 5px;}
<div id='one' onclick='foo(this.id)'>hello</div>
<div id='two' onclick='foo(this.id)'>world</div>