0

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);
}
1
  • I try your code <div class="selector-box"></div> <div class="selector-box"></div> <div class="selector-box"></div> <div class="selector-box"></div> Like this it's work
    – Vinh
    Commented Nov 8, 2013 at 1:56

4 Answers 4

5

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

0

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/

0

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

5
  • Thank you Vinh, that answers my first question Commented Nov 8, 2013 at 2:09
  • I base on your code but danzkusuma's answer is better, use his code. I recommend $(".selector-box").click(function () { $('.selector-box').removeClass("selected"); $(this).addClass("selected"); });
    – Vinh
    Commented Nov 8, 2013 at 2:11
  • As for my second question, in my actual code, selector-box has a background color while selector-box-selected is a background image. When I click on a 'selector-box' to change it to 'selector-box-selected' it changes the width & height however does not get rid of the background color it seems. Anyone know why this happens? Commented Nov 8, 2013 at 2:15
  • Vinh - your solution would work except both divs have an opacity of .25 so you can see the other one underneath Commented Nov 8, 2013 at 2:38
  • In chrome I tested, I use your code and make it's opacity is .25 but it's keep working. div with selector-box-selected change width and height and it doesn't laid on other div at all.
    – Vinh
    Commented Nov 8, 2013 at 2:47
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.