Question

我正在尝试从头开始创建一个包含5个项目的滚动视图，我正在使用div标签来结合jQuery和CSS类。

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

我正在使用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并且它不起作用，所以通过搜索我找到了一个答案jQuery UI switchClass() method is not working properly表明我应该替换

.switchClass

使用

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

Answer 1

您无法在ID中使用空格。 jQuery选择器会认为它是一个后代对象！

如果你有

的例子

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

孩子的jQuery选择器

$(".ancestor .child")

空间意味着后代对象。在您的情况下，jQuery在id circle

的元素中寻找对象＆lt; 3＆gt;

来源：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

空间＆＃39; id＆＃39;属性在HTML中不合法，将其更改为下划线或短划线，并应解决问题。

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

jQuery切换div类点击不起作用

2 个答案: