CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Petar-Krešimir
Petar-Krešimir

Reputation: 464

jQuery switch div class on click not working

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

Upvotes: 0

Views: 206

Answers (2)

nanndoj
nanndoj

Reputation: 6770

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

Upvotes: 3

patt
patt

Reputation: 21

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

Upvotes: 1

Related Questions