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

时间:2019-02-03 17:57:45

标签: javascript html

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

3 个答案:

答案 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>