Question

以下是我的代码。我正在尝试选择一个基于两个属性的元素，一个是使用.class选择器的类。和其他使用数据属性[data-depth='2']。

jQuery(document).on('click', ".node [data-depth='2']", function() {
  alert("clicked");
})

.node {
  height: 30px;
  width: 150px;
  padding: 5px;
  background: #EF4836;
  margin: 10px;
  cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="node" data-depth="2">
  Click me
</div>

<div class="node" data-depth="3">
  Do not Click me
</div>

但该元素未被选中。我做错了什么？

Answer 1

删除.node和[data-depth='2']之间的空格。空格意味着.node的后代元素具有属性data-depth="2"。

jQuery(document).on('click', ".node[data-depth='2']", function() {
    alert("clicked");
})

.node {
  height: 30px;
  width: 150px;
  padding: 5px;
  background: #EF4836;
  margin: 10px;
  cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="node" data-depth="2">
  Click me
</div>

<div class="node" data-depth="3">
  Do not Click me
</div>

Answer 2

jQuery(document).on('click', "[data-depth='2'].node", function() {
  alert("clicked");
})

.node {
  height: 30px;
  width: 150px;
  padding: 5px;
  background: #EF4836;
  margin: 10px;
  cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="node" data-depth="2">
  Click me
</div>

<div class="node" data-depth="3">
  Do not Click me
</div>

它们之间应该没有空格。如果有空格，则会看for the child class node [data-depth='2']

Answer 3

另一种方法

这将有更多实际用途：

HTML

点击我

 <div class="node" data-depth="3">
    Do not Click me
 </div>

JAVASCRIPT

$(document).on('click', ".node", function() {
_this = $(this);
_depth = _this.data("depth");

  switch(_depth) {
   case 2: alert('clicked '+ 2);break;
   case 3: alert('clicked '+ 3);break;
   default : alert('clicked other')
  }
})

在Jquery中使用类和一些其他属性选择元素

3 个答案: