Question

我已将相同的功能分配给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的属性之一。

Answer 1

传递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>

Answer 2

如果我没记错的话，建议不要使用内联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/

Answer 3

您可以将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>

通过功能确定负责该功能调用的元素ID。没有jQuery

3 个答案: