Question

好的，我有一个班级列表＆＃34;活跃＆＃34;在每个LI元素上。

<ul class="mylist">
<li class="active">Myval1</li><li class="active">MyVal</li>...
</ul>

我希望点击任何这些li元素，将其类改为＆＃34;不活动＆＃34;

$(document).ready(function(){
$(".active").on("click", function(){
$(this).removeClass("active");$(this).addClass("inactive");
//second question code goes here <<<
});
});

然后无法再次点击它，除非它的类被更改回＆＃34; active＆＃34;。并且这段代码有效，但是一旦事件处理程序绑定到一个元素，它就不会考虑类更改，这意味着类会被更改，但即使它是＆＃34;不活动＆＃34;你仍然可以点击它，它可以正常工作＆＃34;活跃＆＃34;。

所以我的第一个问题是如何做到这一点，以便在改变＆＃34; active＆＃34;之后到＆＃34;不活跃＆＃34;你不能点击它，除非它变回活动状态？

我的第二个问题：

var val=jQuery('.myinput').val();
          jQuery('.myinput').val(val+jQuery(this).text()+',');

此代码位于on click函数内（来自第一个代码）问题是，为什么当我点击元素时，它会将值添加到输入但是TWICE，所以如果我点击＆＃34; myval＆＃34 ;它增加了＆＃34; myval，myval＆＃34;单击？

Answer 1

我希望你期待这样的事情

$('body').on('click', 'li', '', function (e) {

    if ($(this).hasClass('active')) {
        $(this).removeClass('active');
        $(this).addClass('inactive');


        var values = $(this).text();
        var strs = values.search("[x]");

        if (strs > 0) {
            var vals = values.replace("[x]", "");
            $('.mylist').append("<li class=active>" + vals + "<a class='removeme'>[x]</a>");
        } else {
            $('.mylist').append("<li class=active>" + values + "<a class='removeme'>[x]</a>");
        }

    } else {
        return false;
    }
});

$('body').on('click', 'a.removeme', '', function (e) {
    e.preventDefault();
    $(this).parent().remove();
});

<强> DEMO HERE

Answer 2

JSFIDDLE DEMO

$(document).ready(function(){

 $(document).on("click",".active", function(){
   console.log("now active -> inactive");
   $(this).toggleClass("active inactive"); 
   var val=jQuery('.myinput').val();
   jQuery('.myinput').val(val+jQuery(this).text()+',');
 });

 $(document).on("click",".inactive", function(e){
    console.log("still inactive. Do nothing");
    return false;
 });

});

Answer 3

$(document).ready(function(){

    // All li elements in my .myList
    $(".myList > li").on("click", function() {

        // Store $(this) in a variable, better for performance memory, jadajada.
        var el = $(this);

        // If the element has class active and NOT inactive we can procede.
        if (el.hasClass('active') && !el.hasClass('inactive')) {

            // Remove active class and add inactive class
            el.removeClass("active").addClass("inactive");

            // Put code here that can only be activated when the class "active" is on the element.
        }

        // If this only needs to be fired when the active class in on the li add it in the if above.
        // Get current value
        var value = $('.myinput').val();

        // IF the value was FOO then the value would now become, "FOO Myval1,"
        value = value + el.text() + ',';

        // add the new value
        $('.myinput').val(value);

    });
});

Answer 4

我认为这会帮助你：

<script type="text/javascript">
    $(document).ready(function () {
        $(".mylist").find('li').click(function () {
            var val = $('.myinput').val();
            if ($(this).attr('class') == 'active') {
                $(this).removeClass("active").addClass("inactive");
                val += $(this).html() + ',';
            }
            else {
                $(this).removeClass("inactive").addClass("active");
                val = '';
                var ItemCount = $(".mylist").find('li.inactive');
                for (var i = 0; i < ItemCount.length; i++) {
                    val += $(ItemCount[i]).html() + ',';
                }
            }
            $('.myinput').val(val);
        });
    });
</script>

jquery添加/删除类和事件

4 个答案: