条件分岐の表示について
条件分岐について質問です。
現在、inputタグのcheckboxでクリックしたvalueとその条件とあう商品を表示させる動きをしているのですが、
条件式の中にcandyとmeatがクリックされた場合、それに該当する物を表示するようにしているのですが、
前の条件で返されてしまうため、表示ができません。
どのような書き方をすれば解決するのでしょうか?
</html>
<body>
<div class="products block">
<h2 class="section-header">
<span>ミルミールの製品</span>
</h2>
<form class="refine-search-form fs-18">
<input type="hidden" name="mode" value="json" class="target">
<input type="hidden" name="disp_number" value="1000" class="target">
<input type="checkbox" value="candy" class="target">
<label for="category_id34">インフルブロックのど飴</label>
<input type="checkbox" value="pastry" class="target">
<label for="category_id32">菓子</label>
<input type="checkbox" value="juice" class="target">
<label for="category_id31">ジュース・飲料</label>
<input type="checkbox" value="seasoning" class="target">
<label for="category_id30">調味料</label>
<input type="checkbox" value="vegetables" class="target">
<label for="category_id29">野菜・果物</label>
<input type="checkbox" value="fish" class="target">
<label for="category_id28">鮮魚・海産物</label>
<input type="checkbox" value="meat" class="target">
<label for="category_id27">牛肉・豚肉・鶏肉他</label>
<input type="checkbox" value="food" class="target">
<label for="category_id8">食品</label>
<input type="checkbox" value="otherwise" class="target">
<label for="category_id33">その他</label>
</form>
<div class="block-body">
<ul class="refine-seach list" id="demo">
</ul>
</div>
</div>
</body>
</html>
javascript
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script>
$(function() {
$('.menu_botton').on('click', function() {
var manu = $('.nav_manu');
manu.toggle('slow');
});
getProductsList();
$('.refine-search-form input').on('change', function(event) {
// createArray(event);
getProductsList(event);
});
/**
* ---------------------- ajaxでデータを取得する関数 ------------------------
*/
function getProductsList(event) {
$.ajax({
url: './service.json',
method: 'get',
dataType: 'json'
})
.done(function(data) {
createArray(data, event);
});
}
/**
* ---------------------- 配列を作る関数 -------------------------------
*/
function createArray(data, event) {
$('.refine-seach').empty();
var candyArray = [1,2,3,4,5];
var meatArray = [10,11,12,13,14,15,16,17,18,19];
var newArray = [];
var targetVal;
if (event) {
console.log(event);
targetVal = $(event.currentTarget).val();
}
if(targetVal == 'candy' && targetVal == 'meat') {
newArray = data.products;
} else if(targetVal == 'meat') {
newArray = data.products.filter(function(item,i) {
return item.product_id >= 10;
});
console.log(newArray);
} else if(targetVal == 'candy') {
newArray = data.products.filter(function(item,i) {
return item.product_id <= 5;
});
} else {
newArray = data.products;
console.log(newArray);
};
showData(newArray);
}
/**
* ---------------------- 表示する関数 -------------------------------
*/
function showData(productsArray) {
// console.log(productsArray);
productsArray.forEach(function(item,i) {
var template =
'<li class="drops">' +
'<a href="' + '" >' +
'<img src="https://milmeal.com/upload/save_image/' + item.main_list_image + '" class="product-image">' +
'<div class="make">' +
'<div class="fs-12">' + item.name + item.papc4.value + item.papc5.value +'</div>' +
'<div class="fc-red fs-14 text-right"> 販売価格(税込)' + item.price02_min_inctax + '円' + '</div>' +
'</div>' +
'</a>' +
'</li>';
$('.refine-seach').prepend(template);
});
};
});
</script>