Question

我试图检查span元素的活动和非活动状态。我正在使用在线电影票预订系统。因此，如果用户选择座位，它应该变为绿色。用户再次可以取消选择座位。所以，它应该变成旧颜色。我尝试了一些东西......发布在jsfiddle上。单击span元素时，它可以正常工作。但是，如何取消选择活动的span元素？

JsFiddle

Jquery的

$(".active").click(function(){
    $(this).css('background-color', 'green');
})

CSS 和 HTML

<span class="active">seats</span>
.active
    {
        width: 100px;
        height: 25px;
        color: #000000;
        background: #CCCCCC;
        display: inline-block;
        text-align: center;
    }
    .active
    {
        cursor: pointer;
    }

Answer 1

创建一个名为selected

的类

.selected{
    background-color:green;
}

然后使用.toggleClass切换背景颜色

$(this).toggleClass('selected');

DEMO

Answer 2

创建一个用于切换的课程并应用toggleClass()

.green
{
    background:green;
}

$( "span.active" ).click(function() {
   $( this ).toggleClass( "green" );
});

JSFIDDLE DEMO

Answer 3

尝试 <强>脚本

 $(".active").click(function(){

         ($(this).toggleClass('green_span');
    })

风格

.active
        {
            width: 100px;
            height: 25px;
            color: #000000;
            background: #CCCCCC;
            display: inline-block;
            text-align: center;
        }
        .active
        {
            cursor: pointer;
        }
.green_span{background:green}

如何取消选择活动的span元素？

3 个答案: