Tengo una barra de búsqueda, 2 divs que mostrarán la identificación y el nombre de la marca, y 2 casillas de verificación.
Quiero recuperar los datos de la marca de acuerdo con la búsqueda, si busco "Nike", los divs brand-id y brand-name mostrarán el nombre de la marca y el id según la casilla de verificación a continuación. Y la casilla de verificación debajo está marcada. He codificado como a continuación, pero cuando depuro para obtener el nombre de la marca, se fusiona "nikebrand", por lo que cuando hago un condicionamiento no funciona.
$('.search-brand').on('keyup keypress',function(){ const brandFilterEl = $(".filter-item .filter-label") brandFilterEl.each(function(){ const brandValues = brandFilterEl.text().toLocaleLowerCase() console.log(brandValues) if($('.search-brand').val() === brandValues){ const valFilterBrand = brandFilterEl.siblings().attr('value') console.log(valFilterBrand) $('.brand-id').text(valFilterBrand) $('.brand-name').text(brandValues) } }) }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text" class="search-brand" style="margin-bottom:20px;"> <div class="brand-id"></div> <div class="brand-name"></div> <li class="filter-item" style="padding-left: 20px; font-size: 12px; padding-bottom: 0; border: none;"> <input type="checkbox" name="brandIds" value="3" style="margin-right: 5px"> <span class="filter-label">Nike</span> </li> <li class="filter-item" style="padding-left: 20px; font-size: 12px; padding-bottom: 0; border: none;"> <input type="checkbox" name="brandIds" value="2" style="margin-right: 5px"> <span class="filter-label">Adidas</span> </li>Creo que cuando itera sobre brandFilterEl.each se olvida de verificar el valor actual de brandFilterEl , puede hacerlo usando this . Por conveniencia, creé un alias para $(this) y lo nombré $self .
$('.search-brand').on('keyup keypress', function() { const brandFilterEl = $(".filter-item .filter-label") brandFilterEl.each(function() { var $self = $(this); // this is the main change const brandValues = $self.text().toLocaleLowerCase() if ($('.search-brand').val() === brandValues) { const valFilterBrand = $self.siblings().attr('value') console.log(valFilterBrand) $('.brand-id').text(valFilterBrand) $('.brand-name').text(brandValues) } }) }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text" class="search-brand" style="margin-bottom:20px;"> <div class="brand-id"></div> <div class="brand-name"></div> <li class="filter-item" style="padding-left: 20px; font-size: 12px; padding-bottom: 0; border: none;"> <input type="checkbox" name="brandIds" value="3" style="margin-right: 5px"> <span class="filter-label">Nike</span> </li> <li class="filter-item" style="padding-left: 20px; font-size: 12px; padding-bottom: 0; border: none;"> <input type="checkbox" name="brandIds" value="2" style="margin-right: 5px"> <span class="filter-label">Adidas</span> </li>Puede probar este código, funciona igual que sus expectativas.
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> jQuery(document).ready(function($){ $('.search-brand').on('keyup keypress',function(){ const brandFilterEl = $(".filter-item .filter-label"); brandFilterEl.each(function(i){ $(this).siblings('input[name="brandIds"]').prop( "checked", false ); const brandValues = $(this).text().toLocaleLowerCase(); var search_val = $('.search-brand').val().toLocaleLowerCase(); if(search_val == brandValues){ const valFilterBrand = $(this).siblings('input[name="brandIds"]').val(); $('.brand-id').text(valFilterBrand); $('.brand-name').text(brandValues); $(this).siblings('input[name="brandIds"]').prop( "checked", true ); } }); }); }); </script> </head> <body> <input type="text" class="search-brand" style="margin-bottom:20px;"> <div class="brand-id"></div> <div class="brand-name"></div> <li class="filter-item" style="padding-left: 20px; font-size: 12px; padding-bottom: 0; border: none;"> <input type="checkbox" name="brandIds" value="3" style="margin-right: 5px"> <span class="filter-label">Nike</span> </li> <li class="filter-item" style="padding-left: 20px; font-size: 12px; padding-bottom: 0; border: none;"> <input type="checkbox" name="brandIds" value="2" style="margin-right: 5px"> <span class="filter-label">Adidas</span> </li> </body> </html>