CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user2062092
user2062092

Reputation: 1

Changing CSS class in jQuery

I'm trying to change the CSS class of a couple DIVs, Linked below is my jFiddle

The only change is that the -selected class actually has a background image which seems to have the background color of the -non-selected class.

The other problem is after selecting another div, you can't select the first one again. What exactly is jQuery doing with the classes? When I add the -non-selected class to it, it should become select-able again, right?

http://jsfiddle.net/9FZcz/

jQuery

$(".selector-box").click(function () {
    $(".selector-box-selected").removeClass("selector-box-selected").addClass("selector-box");
    $(this).removeClass("selector-box").addClass("selector-box-selected");
});

HTML

<div class="selector-box-selected"></div>
<div class="selector-box"></div>
<div class="selector-box"></div>
<div class="selector-box"></div>

CSS

.selector-box{
    margin-bottom:2px;
    width:328px;
    height:46px;
    background-color:rgba(255,255,255,.25);
}
.selector-box-selected{
    margin-bottom:2px;
    width:351px;
    height:46px;
    background-image:url(../images/layout/SelectedArrow.png);
}

Upvotes: 0

Views: 2878

Answers (4)

plalx
plalx

Reputation: 43718

There are already answers posted that suggests solutions that requires some refactoring, like adding a selected class to selected elements rather than having seperate selector-box-selected and selector-box classes.

While I think you should perform the refactoring since it makes the overall design better and leads to less CSS code duplication, here's a solution without refactoring the code.

I kept track of the last selected element to avoid looping over all of boxes to remove the selected class.

DEMO

var selectedBox = $('.selector-box-selected').get();

$('.selector-box').add(selectedBox).click(function () {

    if (selectedBox === this) return;

    selectedBox = $([this, selectedBox])
        .toggleClass('selector-box-selected')
        .toggleClass('selector-box')
        .get(0);
});

Upvotes: 0

Fendy Kusuma
Fendy Kusuma

Reputation: 672

You should try another way to adding and removing classes, try this one :

$(".selector-box").click(function () {
    $('.selector-box').removeClass("selected");
    $(this).addClass("selected");
});

Updated JsFiddle

Upvotes: 5

Vinh
Vinh

Reputation: 73

I change your code abit

<div name="ss" class="selector-box-selected"></div>
<div name="ss" class="selector-box"></div>
<div name="ss" class="selector-box"></div>
<div name="ss" class="selector-box"></div>

$("div[name=ss]").click(function () {
    $("div[name=ss]").removeClass("selector-box-selected").addClass("selector-box");
    $(this).removeClass("selector-box").addClass("selector-box-selected");
});

don't mind a name SS, change it to what you want :D

Upvotes: 0

asiviero
asiviero

Reputation: 1235

The problem with not being able to select the first one again is that the click event is not being linked to it, since you only apply it to the <div> elements with the class .selector-box. Apart from that, CSS seems fine, check the fiddle: http://jsfiddle.net/9FZcz/2/

Upvotes: 0

Related Questions