Question

目前我有这样的东西

$("#foo").click(function () {callMe();});
$("#bar").click(function () {callMe();});

foo和bar做同样的事情。我是否可以定义一个选择器，说明是否调用了foo id或bar id然后触发click事件？我试过了，但是没用

 $("#foo","#bar").click(function () {callMe();});

Answer 1

您可以给他们一个类，然后检查目标元素的ID：

$('').on('click', function(e) {
  if (e.currentTarget.id === 'foo') {
    console.log('foo clicked');
  } else {
    console.log('bar clicked');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="click" id="foo">foo</div>
<div class="click" id="bar">bar</div>

或者如果我对这个问题有误解，而您只想使用其ID选择两个元素，则可以使用

$('#foo,#bar').on('click', function() {});

请注意逗号在引号中，而不是单独的引号

Answer 2

语法和代码看起来不错，我认为您没有正确导入jQuery。

我尝试了同样的方法，并且效果很好。看看下面的代码。

function callMe () {
alert("callMe function called!");
} 

$("#foo, #bar").click(function () {callMe();});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="foo"> foo </button> 
<button id="bar"> bar </button>

Answer 3

document.getElementById("demo").addEventListener("click", callMe);

function callMe(e) {
  let id = e.target.id
  console.log(id);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="demo">
  <button id="foo">Foo</button>
  <br> <br>
  <button id="bar">bar</button>
</div>

CSS条件选择器this或that

3 个答案: