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>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>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>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>