我有一個搜索欄、2 個顯示 ID 和品牌名稱的 div，以及 2 個復選框。
我想根據搜索檢索品牌資料，如果我搜索“耐克”，那么品牌 ID 和品牌名稱 div 將根據下面的復選框顯示品牌名稱和 ID。它下面的復選框被打勾。我的編碼如下，但是當我除錯以獲取品牌名稱時，它合并了“nikebrand”，所以當我進行調節時它不起作用
$('.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>uj5u.com熱心網友回復：
您可以試試這個代碼，它的作業原理與您的預期相同。
<!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>uj5u.com熱心網友回復：
我認為當您迭代時brandFilterEl.each忘記檢查 的當前值brandFilterEl，您可以使用this. 為方便起見，我$(this)為它創建了一個別名并將其命名為$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>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/373262.html
標籤：javascript 查询