

条件分岐について質問です。  
現在、inputタグのcheckboxでクリックしたvalueとその条件とあう商品を表示させる動きをしているのですが、  
条件式の中にcandyとmeatがクリックされた場合、それに該当する物を表示するようにしているのですが、  
前の条件で返されてしまうため、表示ができません。  
どのような書き方をすれば解決するのでしょうか？

[code]

    　　　　</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>
    
[/code]


CC BY-SA 4.0
2018-10-15T10:41:49.633
49300
2020-10-11T12:02:05.227
25400
question
javascript jquery
条件分岐の表示について


配列を作る関数を以下の通りに修正していただければたぶん動作すると思います。  
/** **/で囲われている部分は記載の通りに修正してください。

[code]

    /**
    * ---------------------- 配列を作る関数 -------------------------------
    */
    
    function createArray(data, event) 
    {
        //チェック済みのチェックボックスをすべて取得
        var checkedItems = $(".refine-search-form input[type='checkbox']:checked");
    
        var newArray = [];
    
        //チェックされているチェックボックスの一覧を取得
        if(checkedItems.length > 0)
        {
            checkedItems.each(function(i, e)
            {
                var target = $(e).val();
    
                switch(target)
                {
                    case "candy":
                        /** newArrayにキャンディーの商品追加 **/
                        break;
                    case "pastry":
                        /** newArrayに菓子の商品追加 **/
                        break;
                    case "juice":
                        /** newArrayにジュース・飲料の商品追加 **/
                        break;
                    case "seasoning":
                        /** newArrayに調味料の商品追加 **/
                        break;
                    case "vegetables":
                        /** newArrayに野菜・果物の商品追加 **/
                        break;
                    case "fish":
                        /** newArrayに鮮魚・海産物の商品追加 **/
                        break;
                    case "meat":
                        /** newArrayに牛肉・豚肉・鶏肉他の商品追加 **/
                        break;
                    case "food":
                        /** newArrayに食品の商品追加 **/
                        break;
                    case "otherwise":
                        /** newArrayにその他の商品追加 **/
                        break;
                }
            });
        }
        else
        {
            /** newArrayにすべての商品追加 **/
        }
    
        showData(newArray);
    }
    
[/code]

■解説  
記載されているプログラムでは、チェックイベントの発生したチェックボックスに対してのみ名称を取得し、その名称を使用して処理をしています。  
さらに、チェック状況も見ていないため、最後にチェックを外したアイテムもターゲットになってしまいます。  
たぶん、単一選択を複数選択に機能変更しようとしたんですね。

修正後のプログラムでは、まずすべてのチェックボックスからチェック済みのものを配列で取得します。  
その後、その配列の内容を一つ一つチェックを行い、対象とする商品を表示対象の配列に追加していくようにしています。  
すべてのチェックがOFFの時は全アイテムを表示するようなプログラムになっていたので、チェックされているチェックボックスが0件の時は「/**
newArrayにすべての商品追加 **/」の処理をするようにします。

以上となりますが、お求めの回答になっているでしょうか？


CC BY-SA 4.0
2018-10-16T03:29:50.467
49331
2018-10-16T03:29:50.467
17014
49300
answer