CODEWITHSUNDEEP
javascripthtmljquerycss
Lowis
Lowis

Reputation: 123

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

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


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

Upvotes: 0

Views: 51

Answers (3)

Cesare Polonara
Cesare Polonara

Reputation: 3860

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


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

Upvotes: 1

zer00ne
zer00ne

Reputation: 43870

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


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

Upvotes: 2

AndrewL64
AndrewL64

Reputation: 16301

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


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

Upvotes: 2

Related Questions