CODEWITHSUNDEEP
jquery
user3450125
user3450125

Reputation: 5

jquery add/remove class and event

Okay so, i have a list with class "active" on each LI element.

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

And i want onclick on any of those li elements to change its class to "inactive"

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

and then not be able to click on it again unless its class is changed back to "active". And this code works, but once an event handler is bound to an element it doesn't account the class change, meaning the class gets changed but even if is "inactive" you can still click on it and it works as it is "active".

So my first question is how to do it, in such a way that after changing "active" to "inactive" you can't click it, unless its changed back to active?

My second question:

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

This code is inside the on click function (from the first code) the question is, why when i click on element, it adds the value to the input but TWICE, so if I click on "myval" it adds "myval,myval" on single click?

Upvotes: 0

Views: 202

Answers (4)

Kiranramchandran
Kiranramchandran

Reputation: 2094

I hope you are expecting something like this

$('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

Upvotes: 1

Mohamed Rashid.P
Mohamed Rashid.P

Reputation: 183

I think This Will Help You :

<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>

Upvotes: 0

Murali Murugesan
Murali Murugesan

Reputation: 22619

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;
 });

});

Upvotes: 0

Rick Lancee
Rick Lancee

Reputation: 1659

$(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);

    });
});

Upvotes: 0

Related Questions