Tengo dos elementos, ambos con la misma clase .one . Haga clic en este botón y muestre la clase .A . Uno de esos elementos también tiene una identificación de datos de two . Haga clic en este botón y muestre la clase .B .
Pero, como el segundo "botón" también tiene la clase .one , muestra tanto .A como .B .
¿Cómo puedo decir realizar esta función/mostrar .B solo si el botón tiene .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>Cámbielo para aceptar uno u otro cuando se haga clic en cualquier $('.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>Solo usa el selector :not así:
$('.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>El selector JQuery es igual a querySelectorAll , mientras que querySelector selecciona solo el primer elemento que encuentra:
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>