CODEWITHSUNDEEP
javascriptjquery
BobbyJones
BobbyJones

Reputation: 1364

Cannot seem to be able to remove class "selected" when a new LI value is clicked

I need your help,

How can the javascript code be amended such that the previous selection that was made who would have the css class "selected" associated to it, removed when a new value is chosen?

Here is my pic of my problem: enter image description here

Here is a quick fiddle: http://jsfiddle.net/ubntpd9f/

The code in question:

$(document).ready(function() {

    $(".dropdown dt a").click(function() {
        $(".dropdown dd ul").toggle();
    });

    $(".dropdown dd ul li a").click(function(e) {
        var text = $(this).html();

            $(this).removeClass('selected')
            $(this).addClass('selected');
            $(".dropdown dd ul").hide();


    });

    function getSelectedValue(id) {
        return $("#" + id).find("dt a span.value").html();
    }

    $(document).bind('click', function(e) {
        var $clicked = $(e.target);
        if (! $clicked.parents().hasClass("dropdown"))
            $(".dropdown dd ul").hide();
    });


});

Upvotes: 1

Views: 130

Answers (3)

Andrew
Andrew

Reputation: 106

While I would recommend refactoring the way you're building that just a bit, in order to solve it using the code you're currently using, add this line $(".dropdown dd ul li a").removeClass('selected'); inside your .dropdown dd ul li a click function.

Take a look at line 10 on this jsFiddle to see what I mean.

Upvotes: 0

Gacci
Gacci

Reputation: 1398

Id did not work because you are remove and adding right after .selected class. $(this).removeClass('selected') $(this).addClass('selected');

Why would you remove .selected from all, when only one has .selected class. Find which one has .selected class and then remove it. Then add .selected to the one just being selected. 

$(document).ready(function() {
            var dropdown = $(".dropdown");
            $(".dropdown dt a").click(function() {
                $(".dropdown dd ul").toggle();
            });

            $(".dropdown dd ul li a").click(function(e) {

                var text = $(this).html();

                if (e.ctrlKey) {

                    $(this).addClass('selected');

                }
                else {

                    $('.selected', dropdown).removeClass('selected');
                    $(this).addClass('selected');
                    $(".dropdown dd ul").hide();

                }

            });

            function getSelectedValue(id) {
                return $("#" + id).find("dt a span.value").html();
            }

            $(document).bind('click', function(e) {
                var $clicked = $(e.target);
                if (! $clicked.parents().hasClass("dropdown"))
                    $(".dropdown dd ul").hide();
            });


        });

Upvotes: 0

taxicala
taxicala

Reputation: 21789

Remove .selected from all, and then add it to the new one:

$(".dropdown dd ul li a").click(function (e) {
    var text = $(this).html();
    $(".dropdown dd ul li a").removeClass('selected');
    $(this).addClass('selected');
    $(".dropdown dd ul").hide();
});

Upvotes: 4

Related Questions