1

iCheckプラグインを使用して、ラジオとチェックボックスのスタイルを設定しました。しかし、iCheck を含めようとすると、機能が動作しません。

これが私のコードです：

<div id="category-row" class="filter_block col-md-12 rb_nopadding">
    <h5>BROWSE BY</h5>
    <ul class="list-unstyled">
        <li>
            <input type="radio" id="cat-1" class="category_select"  name="category_type" data-category-type="1" value="all_product" <?php echo ($category == '' || $category == 'all_product') ? 'checked="checked"' : ''; ?> />
            <label for="cat-1" class="<?php echo ($category == '' || $category == 'all_product') ? '' : ''?>"><span></span>All</label>      
        </li>
        <li>
            <input type="radio" id="cat-2" class="category_select"  name="category_type" data-category-type="2" value="japanese_tea" <?php echo ($category == 'japanese_tea') ? 'checked="checked"' : ''; ?> />
            <label for="cat-2" class="<?php echo ($category == 'japanese_tea') ? 'active' : ''?>"><span></span>Japanese Tea</label>     
        </li>
        <li>
            <input type="radio" id="cat-3" class="category_select"  name="category_type" data-category-type="3" value="black_vinegar" <?php echo ($category == 'black_vinegar') ? 'checked="checked"' : ''; ?> />
            <label for="cat-3" class="<?php echo ($category == 'black_vinegar') ? 'active' : ''?>"><span></span>Black Vinegar</label>       
        </li>
        <li>
            <input type="radio" id="cat-4" class="category_select"  name="category_type" data-category-type="4" value="food" <?php echo ($category == 'food') ? 'checked="checked"' : ''; ?> />
            <label for="cat-4" class="<?php echo ($category == 'food') ? 'active' : ''?>"><span></span>Food</label>     
        </li>
        <li>
            <input type="radio" id="cat-5" class="category_select"  name="category_type" data-category-type="5" value="cosmetic_health" <?php echo ($category == 'cosmetic_health') ? 'checked="checked"' : ''; ?> />
            <label for="cat-5" class="<?php echo ($category == 'cosmetic_health') ? 'active' : ''?>"><span></span>Cosmetic / Health</label>     
        </li>
        <li>
            <input type="radio" id="cat-6" class="category_select"  name="category_type" date-category-type="6" value="others" <?php echo ($category == 'others') ? 'checked="checked"' : ''; ?> />
            <label for="cat-6" class="<?php echo ($category == 'others') ? 'active' : ''?>"><span></span>Others</label>     
        </li>
    </ul>
</div>

それから私のJS

$('.category_select').on('change', function() {

    var id = $(this).val();
    var cat = $(this);
    var category_type = $(this).data('category-type');

    console.log(id);

    $('.category_select').next('label').css({'color':'#222'})
    $(cat).next('label').css({'color':'#C5B06C'});

    var url = 'index.php?route=shops/shops/shopInfo&user_id=<?php echo $shop_id; ?>';
    var filter_category = cat.val();

    if(filter_category != '') {
        url += '&filter_category=' + encodeURIComponent(filter_category);
    }

    location = url;

});

icCheck を削除すると機能しますが、iCheck プラグインを含めようとすると機能しません。

これで私を助けてもらえますか？

4

1 に答える 1

9

どこが間違っていたのかわかりました。iCheck プラグインには、見逃したイベントが既にあります。

これが私がしたことです：

私が変える

$('.category_select').on('change', function() {

に

$('.category_select').on('ifChanged', function() {

そして今、その作業。

于 2016-02-02T02:35:25.047 に答える