¿Cómo puedo seleccionar solo el elemento en el mismo div con jquery?
$('.to-show').hide(); $('#offset').on('change', function() { if ($(this).val() == "Custom") { $(this).closest('.wrapper').children('.to-show').toggle(); } else { $('.to-show').hide(); } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="wrapper"> <div class="to-click"> <td class="value"> <select id="offset" class="" name="attribute_offset" data-attribute_name="attribute_offset" data-show_option_none="yes"> <option value="">Choose an option</option> <option value="15" selected="selected" class="attached enabled">15</option> <option value="Custom" class="attached enabled">Custom</option> </select> </td> </div> <div class="to-show"> <div class="tc-cell tc-col-auto"><button type="button" class="button tm-section-link" data-title="Custom Offset" data-sectionid="61cc25f8bfe870.59019822">Custom Offset</button></div> </div> </div> <div class="wrapper"> <div class="to-click"> <td class="value"> <select id="offset" class="" name="attribute_offset" data-attribute_name="attribute_offset" data-show_option_none="yes"> <option value="">Choose an option</option> <option value="15" selected="selected" class="attached enabled">15</option> <option value="Custom" class="attached enabled">Custom</option> </select> </td> </div> <div class="to-show"> <div class="tc-cell tc-col-auto"><button type="button" class="button tm-section-link" data-title="Custom Offset" data-sectionid="61cc25f8bfe870.59019822">Custom Offset</button></div> </div> </div>Entonces esto solo funciona con la primera opción de selección
¿Cómo puedo hacer que funcione con la segunda opción de selección que me falta aquí?
probé también $(this).closest('.wrapper').find('.to-show').toggle();
Pero eso no funcionó
gracias
Tener dos elementos con la misma identificación es html no válido. Cámbielo para usar clase u otro atributo. Pero tienes un segundo problema con $('.to-show').hide(); , siempre oculta ambos .to-show .
$('.to-show').hide(); $('.offset').on('change', function() { if ($(this).val() == "Custom") { $(this).closest('.wrapper').children('.to-show').toggle(); } else { $(this).closest('.wrapper').children('.to-show').hide(); } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="wrapper"> <div class="to-click"> <td class="value"> <select id="offset" class="offset" name="attribute_offset" data-attribute_name="attribute_offset" data-show_option_none="yes"> <option value="">Choose an option</option> <option value="15" selected="selected" class="attached enabled">15</option> <option value="Custom" class="attached enabled">Custom</option> </select> </td> </div> <div class="to-show"> <div class="tc-cell tc-col-auto"><button type="button" class="button tm-section-link" data-title="Custom Offset" data-sectionid="61cc25f8bfe870.59019822">Custom Offset</button></div> </div> </div> <div class="wrapper"> <div class="to-click"> <td class="value"> <select id="offset" class="offset" name="attribute_offset" data-attribute_name="attribute_offset" data-show_option_none="yes"> <option value="">Choose an option</option> <option value="15" selected="selected" class="attached enabled">15</option> <option value="Custom" class="attached enabled">Custom</option> </select> </td> </div> <div class="to-show"> <div class="tc-cell tc-col-auto"><button type="button" class="button tm-section-link" data-title="Custom Offset" data-sectionid="61cc25f8bfe870.59019822">Custom Offset</button></div> </div> </div>