jQuery switch div class on click not working

Question

I'm trying to make a scroll view from scratch with 5 items on it and I'm using div tags for those items combined with jQuery and CSS classes.

The click event is being fired but for some reason the new class is not set (circle should be white) and it reverts to its default color.

I'm using Bootstrap 3 and latest jQuery

HTML

<div class="row-fluid">

        <div class="col-md-1"></div>

        <div class="col-md-2">
            <div class="circle 1" id="circle_1>

            </div>
        </div>

        <div class="col-md-2">
            <div class="circle 2" id="circle_2">

            </div>
        </div>

        <div class="col-md-2">
            <div class="circle 3" id="circle_3">

            </div>
        </div>

        <div class="col-md-2">
            <div class="circle 4" id="circle_4">

            </div>
        </div>

        <div class="col-md-2">
            <div class="circle 5" id="circle_5">

            </div>
        </div>

        <div class="col-md-1"></div>

    </div>

CSS

/* CSS used here will be applied after bootstrap.css */


.circle-selected{
    border-radius: 50%;
    width: 100px;
    height: 100px;
    background: #ffffff;
    cursor: pointer;
}

.circle {
    border-radius: 50%;
    width: 100px;
    height: 100px;
    background: #949494;

    -webkit-transition: all ease .3s;
    -moz-transition: all ease .3s;
    -o-transition: all ease .3s;
    transition: all ease .3s;
    font-family: 'Corbel Bold';
    /* width and height can be anything, as long as they're equal */
}

.circle:hover{
    border-radius: 50%;
    width: 100px;
    height: 100px;
    background: #ffffff;
    cursor: pointer;
}

jQuery

$(".circle").click(function(){
        var ID = $(this).attr('class').replace('circle ', '');
        //alert('called 1');

        $("#circle_" + ID).addClass('circle ' + ID).removeClass('circle-selected ' + ID);

    });

    $(".circle-selected").click(function(){
        var ID = $(this).attr('class').replace('circle-selected ', '');
        //alert('called 2');
        $("#circle_" + ID).addClass('circle-selected ' + ID).removeClass('circle ' + ID);

    });

Examples are the best so here's mine: http://www.bootply.com/6qrSq5KvkK

Can someone point it out what am I doing wrong here? I tried .switchClass and it doesn't work, so by searching SO I found an answer here jQuery UI switchClass() method is not working properly that suggest I should replace

.switchClass

With

addClass('square').removeClass('circle');

1) Why use "space" in ID value? Try replacing the space with an underscore. 2) Try removing the class first and after add the other class. — Eduardo Vélez, Jan 02 '15 at 23:17

nanndoj · Accepted Answer · 2015-01-02T23:41:53.447

3

You can't use space in ID. jQuery selector will think it's a descendent object!

Example if you have

<div class="ancestor">
      <div class="child">
      </div>
</div>

jQuery selector for child

$(".ancestor .child")

the space means descendent object. In your case, jQuery is looking for an object <3> inside an element with id circle

Source: http://www.w3schools.com/cssref/css_selectors.asp

Edit:

You also don't need to add the ID in the class attribute. May it work for you:

  var ID = $.trim($(this).attr('class').replace('circle-selected', '').replace('circle', ''));
  $("#circle_" + ID).toggleClass('circle').toggleClass('circle-selected');

See this JSFiddle

edited Jan 02 '15 at 23:41

answered Jan 02 '15 at 23:11

nanndoj

6,580
7
30
42

Thanks, I didn't know that. I fixed the ID tags (also I forgot to change the IDs in the code snippet, edited it as well). But I'm still facing issues with it. – Petar-Krešimir Jan 02 '15 at 23:15
You also have space in the class name! I don't think you need put ID in the class name by looking at your CSS. – nanndoj Jan 02 '15 at 23:18
I was using this question as a reference http://stackoverflow.com/questions/5563783/jquery-class-click-multiple-elements-click-event-once (answer number two) on how to handle class click event. So I'm not allowed to use spaces in classes as well? How can I know then which of the circles has been clicked, I need to pass the ID somehow? – Petar-Krešimir Jan 02 '15 at 23:21
Spaces in class attribute means 2 different classes. if you want to store the element ID you may use data- attributes – nanndoj Jan 02 '15 at 23:22
Thanks a lot. Marked as answer. I figured out that I can use "jQuery(this).attr("id");" to fetch the ID as well, so managed to get it to two lines of code. – Petar-Krešimir Jan 02 '15 at 23:38

score 1 · Answer 2 · answered Jan 02 '15 at 23:14

1

Spaces in 'id' attribute are not legal in HTML, change it to underscore or dash and should resolve the issue.

<div class="circle" id="circle_1">

answered Jan 02 '15 at 23:14

patt

21
3

jQuery switch div class on click not working

2 Answers2