1

我正在为我的申请试验一种不同类型的审查系统。我有 5 个值从 1 到 5 的单选按钮，每个值都代表一种颜色。

如果用户要评论电影“蝙蝠侠：黑暗骑士”，它看起来像这样：

在此处输入图像描述

当用户单击一个值时，它会更改背景颜色。我正在使用 jQuery 来控制它。

问题是：用户应该只能选择一个值，并且只有那个值应该改变背景颜色，现在你改变点击任何值，它就会改变它的背景颜色。

我怎么能在 jQuery 中做到这一点，欢迎任何提示或想法！

这是 jsfiddle 中的一个示例：http: //jsfiddle.net/puWJZ/

HTML：

<label class="input-check ch1">
 <input id="#rb1" type="radio" value="1"   name="reviewbutton" /> Bad
</label>
<label class="input-check ch2">
 <input id="#rb2" type="radio" value="2"   name="reviewbutton" /> Acceptable
</label>
<label class="input-check ch3">
 <input id="#rb3" type="radio" value="3"   name="reviewbutton" /> Good
</label>
<label class="input-check ch4">
 <input id="#rb4" type="radio" value="4"   name="reviewbutton" /> Very good
</label>
<label class="input-check ch5">
 <input id="#rb5" type="radio" value="5"   name="reviewbutton" /> Excellent
</label>
<div class="box">POP UP!</div>

CSS：

.input-check {
    display: block;
    height:20px;
    padding:10px;
    width:90px;
    color:#EEEEEE;
    font-weight: 600;
    text-align: center;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background-color: #333333;
    margin:10px;
    cursor: pointer;
}
input {
    display:none;
}
.ch1:hover{background-color: #ba0012; cursor: pointer;}
.ch2:hover{background-color: #ba0099; cursor: pointer;}
.ch3:hover{background-color: #00ba88; cursor: pointer;}
.ch4:hover{background-color: #0bbdf0; cursor: pointer;}
.ch5:hover{background-color: #f0b10b; cursor: pointer;}

jQuery：

$(document).ready(function(){
    $('.box').hide();
    /* Bad */
    $('.ch1').click(function(){
        $(this).css({'background-color' : '#ba0012'});
        $('.box').show();
    });
    /* Acceptable */
    $('.ch2').click(function(){
        $(this).css({'background-color' : '#ba0099'});
        $('.box').show();
    });
    /* Good */
    $('.ch3').click(function(){
        $(this).css({'background-color' : '#00ba88'});
        $('.box').show();
    });
    /* Very good */
    $('.ch4').click(function(){
        $(this).css({'background-color' : '#0bbdf0'});
        $('.box').show();
    });
    /* Excellent */
    $('.ch5').click(function(){
        $(this).css({'background-color' : '#f0b10b'});
        $('.box').show();
    });
});
4

6 回答 6

2

要重置其余元素的颜色，只需添加：

$('.input-check').css('background-color',"");

给你所有的事件处理程序。

这是一个演示：http: //jsfiddle.net/puWJZ/1/

或者，您可以将此事件侦听器添加到代码的末尾：

$('.input-check').click(function(){
    $('.input-check').not(this).css('background-color',"");
});

这是替代方法的演示：http: //jsfiddle.net/puWJZ/3/

于 2012-12-15T21:05:33.633 回答
1

I don't really like the way that you are doing it, you don't need to create a function for each label. But I think that what you want to do is use the jQuery not selector Let me propose you a better way to do this:

$(document).ready(function(){
    var myColors=new Array('#ba0012', '#ba0099', '#00ba88', '#0bbdf0', '#f0b10b');
    $('.box').hide();
    $('.input-check').click(function(){        
        $(this).css({'background-color' : myColors[$('.input-check').index($(this))]});
        $('.input-check').not($(this)).css({'background-color' : ''});
        $('.box').show();
    });
});

http://jsfiddle.net/puWJZ/7/

于 2012-12-15T21:11:06.157 回答
1

我会完全删除内联 CSS 并在你的按钮上切换一个类。您已经拥有:hover样式中的所有 css 颜色，只需添加选择器以包含一个active类会使其更简洁，因为删除类比存储和恢复内联 css 要简单得多

CSS 示例

.ch1:hover, .ch1.selected {background-color: #ba0012; cursor: pointer;}

JS改变类：

$('.input-check').click(function(){
   $('.input-check.selected').removeClass('selected');
   $(this).addClass('selected');

     /* other code when clicked*/
})
于 2012-12-15T21:21:09.530 回答
0

正如其他答案所提到的，绝对要使用一段代码来处理所有按钮的单击事件。在这里，我将bgcolor作为自定义属性添加到每个单选按钮：

<input id="#rb1" type="radio" value="1"   name="reviewbutton" bgcolor="#ba0012"/> Bad

我还在所有输入标签上添加了一个类：

<label class="input-check ch1 rating_item">

然后我们检查任何这些元素的点击，从自定义属性中获取 bgbolor 并将其设置在点击的元素上（并重置所有其他元素）

$(document).ready(function(){
    $('.box').hide();
    $('.rating_item').click(function(){
        $('.rating_item').each(function(){
            $(this).css("background-color","#333333");
        });
        var this_bg_color = $(this).children().attr("bgcolor");
        $(this).css('background-color',this_bg_color);
        $('.box').show();
    });
});

http://jsfiddle.net/UxyWq/3/

于 2012-12-15T21:13:40.547 回答
0

这是将所有其他颜色更改回其原始颜色的非常基本的方法。

$('.ch2, .ch3, .ch4, .ch5').css({'background-color' : '#333'});

http://jsfiddle.net/puWJZ/5/

于 2012-12-15T21:15:16.960 回答
0

使用类标记标签并将该类设置为与悬停 css 中相同

CSS：

.ch1:hover,.ch1.checked{background-color: #ba0012; cursor: pointer;}
.ch2:hover,.ch2.checked{background-color: #ba0099; cursor: pointer;}
.ch3:hover,.ch3.checked{background-color: #00ba88; cursor: pointer;}
.ch4:hover,.ch4.checked{background-color: #0bbdf0; cursor: pointer;}
.ch5:hover,.ch5.checked{background-color: #f0b10b; cursor: pointer;}

js：

$(document).ready(function() {
    $('.box').hide();
    $('label.input-check input').click(function(e) {
        e.stopPropagation();
        $('label.input-check').removeClass('checked');
        //the reason for next string it is just to make same code compatible with checkboxes
        //if not needed it ok to set $(this).parent().addClass('checked');
        $('label.input-check input:checked').parent().addClass('checked');
    });
    $('label.input-check').click(function(e) {
        var $t = $(this);
        if ($t.attr('type') == 'radio') {
            return true;
        }
        $t.children().first().click();
    });
});​

演示

解决它的另一种方法是使输入与父级大小相同并将不透明度设置为0：

js：

$(document).ready(function() {
    $('.box').hide();
    $('label.input-check input').click(function(e) {
        $('label.input-check').removeClass('checked');
        //the reason for next string it is just to make same code compatible with checkboxes
        //if not needed it ok to set $(this).parent().addClass('checked');
        $('label.input-check input:checked').parent().addClass('checked');
    });

});​​

在 css 中删除输入并设置：

label.input-check input {
    width: 100%;
    height: 100%;
    opacity: 0;
    position: absolute;
}
.ch1:hover,.ch1.checked{background-color: #ba0012; cursor: pointer;}
.ch2:hover,.ch2.checked{background-color: #ba0099; cursor: pointer;}
.ch3:hover,.ch3.checked{background-color: #00ba88; cursor: pointer;}
.ch4:hover,.ch4.checked{background-color: #0bbdf0; cursor: pointer;}
.ch5:hover,.ch5.checked{background-color: #f0b10b; cursor: pointer;}

演示2

于 2012-12-15T21:39:50.280 回答