如何在jQuery中选择一个元素_Jquery_Html_Css

如何在jQuery中选择一个元素

jquery html css

如何在jQuery中选择一个元素,jquery,html,css,Jquery,Html,Css,我正在为我的申请试验一种不同的审查系统。我有5个值为1到5的单选按钮，每个值代表一种颜色如果用户要查看电影“蝙蝠侠：黑暗骑士”，它将如下所示：当用户单击某个值时，它会更改背景色。我正在使用jQuery来控制这一点问题是什么：用户应该只能选择一个值，并且只有该值应该更改背景色，现在您可以更改并单击任何值，它将更改其背景色我如何在jQuery中做到这一点，欢迎提供任何提示或想法以下是JSFIDLE中的一个示例： HTML: <label class="input-check ch1

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

如果用户要查看电影“蝙蝠侠：黑暗骑士”，它将如下所示：

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

问题是什么：用户应该只能选择一个值，并且只有该值应该更改背景色，现在您可以更改并单击任何值，它将更改其背景色

我如何在jQuery中做到这一点，欢迎提供任何提示或想法

以下是JSFIDLE中的一个示例：

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>

.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;}

$(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();
    });
});

jQuery:

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

.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;}

$(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();
    });
});

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

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

到所有事件处理程序

下面是一个演示：

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

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

下面是另一种方法的演示：

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

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

到所有事件处理程序

下面是一个演示：

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

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

下面是另一种方法的演示：

我并不喜欢您这样做，您不需要为每个标签创建函数。但我认为你想做的是使用“让我向你推荐一种更好的方法来做到这一点”：

$(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();
    });
});

我不太喜欢您这样做，您不需要为每个标签创建函数。但我认为你想做的是使用“让我向你推荐一种更好的方法来做到这一点”：

$(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();
    });
});

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

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

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

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

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

$（'.ch2、.ch3、.ch4、.ch5'）.css（{'background-color'：'#333'）
这是将所有其他颜色更改回原始颜色的一种非常基本的方法
$（'.ch2、.ch3、.ch4、.ch5'）.css（{'background-color'：'#333'）
我将完全删除内联CSS，并在按钮上切换一个类。您的：hover
样式中已经有了所有css颜色，只需添加选择器以包含活动的类，就会使它更干净，因为删除类要比存储和恢复内联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*/
})

我会完全删除内联CSS并在按钮上切换一个类。您的：hover
样式中已经有了所有css颜色，只需添加选择器以包含活动的类，就会使它更干净，因为删除类要比存储和恢复内联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*/
})

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


另一种解决方法是使输入与父项大小相同，并将“不透明度”设置为0：
js:
在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;}

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


另一种解决方法是使输入与父项大小相同，并将“不透明度”设置为0：
js:
在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;}

您能提供JSFIDLE吗？您的解决方案看起来很棒，而且非常干净！谢谢。与内联css相比，改变类始终是第一条思路。正如您所看到的，它简单得多，并且在复杂的应用程序中导致的问题更少。它保持了风格和逻辑的分离。您能提供JSFIDLE吗？您的解决方案看起来很棒，而且非常干净！谢谢。与内联css相比，改变类始终是第一条思路。正如您所看到的，它简单得多，并且在复杂的应用程序中导致的问题更少。它保持了风格和逻辑的分离我喜欢你的解决方案，但当我保存评论时，它不会保存值。@SHUMAcupcake如果通过保存你指的是表单提交，没有JS解决方案可以这样做，你必须使用服务器端语言。不，我不是指表单提交。@SHUMAcupcake那么你如何保存值？在这个例子中并没有任何与此相关的东西。我正在使用rails，抛出一个rails表单，它与我的例子不起作用。这里有一个要点：我喜欢你的解决方案，但当我保存评论时，它不会保存值。@SHUMAcupcake如果通过保存你指的是表单提交，没有JS解决方案可以做到这一点，你必须使用服务器端语言。不，我不是指表单提交。@SHUMAcupcake那么你如何保存值？在这个例子中并没有任何与此相关的东西。我正在使用rails，抛出一个rails表单，它与我的例子不起作用。这里有一个要点：我猜你甚至没有阅读代码就发表了评论，这是一个自定义属性，与cssbetter使用无关的是data bgcolor
，但是bgcolor
也是一个被弃用的属性，bgcolor是一个糟糕的属性名选择。我猜你甚至没有阅读代码就发表了评论，这是一个自定义属性，与cssbetter无关。使用bgcolor将是数据bgcolor
，但是bgcolor
也是一个被弃用的属性。尽管如此，bgcolor对于属性名还是一个糟糕的选择