toggleClass 不会第一次添加类并进一步工作

debugcn 发表于 Dev

MD 博拉尼亚

第一次点击时toggleclass()不添加选择的类，但之后它工作顺利

HTML：

<li class="categories col-lg-3 col-md-3 col-sm-4 col-xs-4 text-center pb20 pointer" id="1" onclick="categories(this.id)">
  <img src="some-image" class="registerCategory">
Rice
</li>

JS：

var taken1 = [];
function categories(c_id)  {

    $("li.categories").click(function(e1) {
        e1.preventDefault();            
        $(this).toggleClass("selected");
        e1.stopImmediatePropagation();
    });

    var inp = document.getElementById("categories");
    var ind = taken1.indexOf(c_id);

    if(ind > -1){
        taken1.splice(ind,1);
        taken1 = taken1;
    } else {
        taken1.push(c_id);
    }
    inp.value = taken1.join(',');
}

玛雅克·帕特尔

click在您的函数之外的第一个 click.bind事件之后，您的事件被绑定。

var taken1 = [];
$("li.categories").click(function(e1) {
        e1.preventDefault();            
        $(this).toggleClass("selected");
        e1.stopImmediatePropagation();
    });
function categories(c_id)  {    

    var inp = document.getElementById("categories");
    var ind = taken1.indexOf(c_id);

    if(ind > -1){
        taken1.splice(ind,1);
        taken1 = taken1;
    } else {
        taken1.push(c_id);
    }
    inp.value = taken1.join(',');
}

.selected { background-color: #7bf29f; border-radius: 50%; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="categories col-lg-3 col-md-3 col-sm-4 col-xs-4 text-center pb20 pointer" id="1"><img src="some-image" class="registerCategory">Rice</li>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。