jQuery 切换 div class 单击无效

Question

我正在尝试从头开始制作一个包含 5 个项目的滚动视图，我正在为这些项目使用 div 标签并结合 jQuery 和 CSS classes.

正在触发点击事件，但由于某种原因，新的 class 未设置（圆圈应为白色），它恢复为默认颜色。

我正在使用 Bootstrap 3 和最新的 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);

    });

例子是最好的所以这是我的例子：http://www.bootply.com/6qrSq5KvkK

有人可以指出我在这里做错了什么吗？我试过 .switchClass 但它不起作用，所以通过搜索 SO 我在这里找到了一个答案 jQuery UI switchClass() method is not working properly 建议我应该替换

.switchClass

有

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

Answer 1

您不能在 ID 中使用 space。 jQuery 选择器会认为它是后代 object!

示例如果你有

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

jQuery child

的选择器

$(".ancestor .child")

space 表示后代 object。在你的例子中，jQuery 正在寻找一个 object <3> 元素内的 id circle

来源：http://www.w3schools.com/cssref/css_selectors.asp

编辑：

您也不需要在 class 属性中添加 ID。希望它对你有用：

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

看到这个JSFiddle

Answer 2

'id' 属性中的空格在 HTML 中不合法，将其更改为下划线或破折号应该可以解决问题。

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

jQuery 切换 div class 单击无效

jQuery switch div class on click not working

html

javascript

css

jquery

twitter-bootstrap