[英]Show/Hide div based on matched json data
我有一個函數來加載JSON文件中的所有數據,如果data[i]['brand_id'] == modelId
,我會顯示匹配的數據
<script>
function loadModel(modelId) {
$.ajax({
type: "POST",
dataType: 'json',
url: '/api/model.json',
success: function (data) {
$.each(data, function (i, v) {
if (data[i]['brand_id'] == modelId) {
$('#item-brand-list').append('<option data-brand-id="' + modelId + '" value="' + data[i]['id'] + '">' + data[i]['name'] + '</li>');
}
});
}
});
}
</script>
此功能將在此代碼段上執行:
<script>
$(document).on('click', '.SelectOption', function () {
var val = $(this).attr('data-val');
loadModel(val); // here
});
</script>
例如,如果任何數據(來自JSON)等於給定的modelId
它會將匹配的數據附加到select option
但如果沒有匹配,我想隱藏select-ads-brand
。
我試過了:
<script>
if (data[i]['brand_id'] == modelId) {
$('#select-ads-brand').show();
$('#item-brand-list').append('<option data-brand-id="' + modelId + '" value="' + data[i]['id'] + '">' + data[i]['name'] + '</li>');
} else {
$('#select-ads-brand').hide();
}
</script>
HTML:
<div id="select-ads-brand">
<select id="item-brand-list">
<option>-- Select --</option>
</select>
</div>
但沒有成功,我認為顯示隱藏div
是不好的邏輯。
有什么建議嗎?
嘗試使用以下內容:
function loadModel(modelId) {
$.ajax({
type: "POST",
dataType: 'json',
url: '/api/model.json',
success: function(data) {
var foundMatch = false;
$.each(data, function(i, v) {
if (data[i]['brand_id'] == modelId) {
$("#select-ads-brand").show(); // if match found show the div
$('#item-brand-list').append('<option data-brand-id="' + modelId + '" value="' + data[i]['id'] + '">' + data[i]['name'] + '</li>');
foundMatch = true; // set variable to true on success of match
}
});
// if no match found simply hide the div
if(!foundMatch) $("#select-ads-brand").hide();
}
});
}
你可以使用filter
功能,並做這樣的檢查
const filtereddata = data.filter(ele => ele['brand_id']==modelId);
if(filtereddata.length > 0)
{
//add filtered data
$.each(filtereddata, function (i, v) {
$('#item-brand-list').append('<option data-brand-id="' +
modelId + '" value="' + data[i]['id'] + '">' + data[i]
['name'] + '</li>');
});
//show
$('#select-ads-brand').show();
}
else
{
//hide
$('#select-ads-brand').hide();
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.