仅在单击确切的 class 和数据 ID 时起作用

Question

我有两个元素都具有相同的 class .one。单击此按钮并显示 class .A。其中一个元素还具有 two 的数据 ID。单击此按钮并显示 class .B.

但是，由于第二个“按钮”也有 class .one 它同时显示 .A 和 .B。

如果按钮有 .one and .two，我怎么能说执行此功能/显示 .B 仅？

$('.one').on('click', function() {
  $('.A').show();
});
$("[data-id='two'].one").on('click', function() {
  $('.B').show();
});

.one {
  width: 50px;
  margin: 10px;
  padding: 10px 0;
  text-align: center;
  outline: 1px solid black
}

.A,
.B {
  display: none;
  background: yellow;
  width: 50px;
  margin: 10px;
  padding: 10px 0;
  text-align: center;
  outline: 1px solid black
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="one">one</div>
<div data-id="two" class="one">two one</div>


<div class="A">A</div>
<div class="B">B</div>

Answer 1

单击任何 $('.one') 时将其更改为接受其中之一：

$('.one').on('click', function() {
  if ($(this).data('id')) {
    $('.B').show();
  } else {
    $('.A').show();
  }
});

if ($(this).data('id')) {...
// if the `data-id` has a value ex. "2", then it is true

$('.one').on('click', function() {
  if ($(this).data('id')) {
    $('.B').show();
  } else {
    $('.A').show();
  }
});

.one {
  width: 50px;
  margin: 10px;
  padding: 10px 0;
  text-align: center;
  outline: 1px solid black
}

.A,
.B {
  display: none;
  background: yellow;
  width: 50px;
  margin: 10px;
  padding: 10px 0;
  text-align: center;
  outline: 1px solid black
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="one">one</div>
<div data-id="two" class="one">two one</div>


<div class="A">A</div>
<div class="B">B</div>

Answer 2

只需像这样使用 :not 选择器：

$('.one:not([data-id="two"])').on('click', function() {
  $('.A').show();
});
$("[data-id='two'].one").on('click', function() {
  $('.B').show();
});

.one {width: 50px;margin: 10px;padding: 10px 0;text-align: center;outline: 1px solid black}

.A, .B {display: none;background: yellow;width: 50px;margin: 10px;padding: 10px 0;text-align: center;outline: 1px solid black}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="one">one</div>
<div data-id="two" class="one">two one</div>


<div class="A">A</div>
<div class="B">B</div>

Answer 3

JQuery 选择器等于 querySelectorAll，而 querySelector 只选择它找到的第一个元素：

document.querySelector(".one").onclick = function() {
  $('.A').show();
}
$("[data-id='two'].one").on('click', function() {
  $('.B').show();
});

.one {
  width: 50px;
  margin: 10px;
  padding: 10px 0;
  text-align: center;
  outline: 1px solid black
}

.A,
.B {
  display: none;
  background: yellow;
  width: 50px;
  margin: 10px;
  padding: 10px 0;
  text-align: center;
  outline: 1px solid black
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="one">one</div>
<div data-id="two" class="one">two one</div>


<div class="A">A</div>
<div class="B">B</div>

仅在单击确切的 class 和数据 ID 时起作用

Function only on click of the exact class and data-id

html

javascript

css

jquery