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

I have two elements both with the same class .one. Click this button and show class .A. One of those elements also has a data-id of two. Click this button and show class .B.

But, as the second "button" also has the class .one it's showing both .A and .B.

How can I say perform this function/ show .B only if button has .one and .two?

https://jsfiddle.net/tdo6cz7p/

$('.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 >one</div>
<div data-id="two" >two one</div>


<div >A</div>
<div >B</div>

CodePudding user response：

Just use the :not selector like this:

$('.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 >one</div>
<div data-id="two" >two one</div>


<div >A</div>
<div >B</div>

CodePudding user response：

Change it to accept one or the other when any $('.one') is clicked:

$('.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 >one</div>
<div data-id="two" >two one</div>


<div >A</div>
<div >B</div>

CodePudding user response：

JQuery selector equals to querySelectorAll, while querySelector selects only the first element it finds:

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 >one</div>
<div data-id="two" >two one</div>


<div >A</div>
<div >B</div>