如何在 javascript 中为两个不同的类操作相同的函数

Question

我必须在同一页面上使用两种不同大小的复选框。我将根据复选框name 确定要使用的尺寸。如果name='room' 我将使用类'custom-checkbox' 的大图像。否则name='request'，我会用custom-checkbox2班级的小图。

现在，我该如何修改下面的脚本，以便它可以根据复选框的名称来确定使用哪个类？

CSS：

.custom-checkbox{
  width: 50px;
  height: 50px;
  display: inline-block;
  position: relative;
  z-index: 1;
  top: 3px;
  background: url("../img/big-check-nopass.png") no-repeat;
}
.custom-checkbox:hover{
  background: url("../img/big-check-pass.png") no-repeat;
}
.custom-checkbox.selected{
  background: url("../img/big-check-pass.png") no-repeat;
}
.custom-checkbox input[type="checkbox"]{
  margin: 0;
  position: absolute;
  z-index: 2;            
  cursor: pointer;
  outline: none;
  opacity: 0;
  /* CSS hacks for older browsers */
  _noFocusLine: expression(this.hideFocus=true); 
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -khtml-opacity: 0;
  -moz-opacity: 0;
}
/* Let's Beautify Our Form */

label{
  display: block;
  padding: 2px 0;
}

/*for small cehckbox*/
.custom-checkbox2{
  width: 20px;
  height: 20px;
  display: inline-block;
  position: relative;
  z-index: 1;
  top: 3px;
  background: url("../img/small-check-nopass.png") no-repeat;
}
.custom-checkbox2:hover{
  background: url("../img/small-check-pass.png") no-repeat;
}
.custom-checkbox2.selected{
  background: url("../img/small-check-pass.png") no-repeat;
}
.custom-checkbox2 input[type="checkbox"]{
  margin: 0;
  position: absolute;
  z-index: 2;            
  cursor: pointer;
  outline: none;
  opacity: 0;
  /* CSS hacks for older browsers */
  _noFocusLine: expression(this.hideFocus=true); 
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -khtml-opacity: 0;
  -moz-opacity: 0;
}
/* Let's Beautify Our Form */

label2{
  display: block;
  padding: 2px 0;
}

Javascript：

function customCheckbox(checkboxName){
  var checkBox = $('input[name="'+ checkboxName +'"]');
  $(checkBox).each(function(){
    $(this).wrap( "<span class='custom-checkbox'></span>" );
    if($(this).is(':checked')){
      $(this).parent().addClass("selected");
    }
  });
  $(checkBox).click(function(){
    $(this).parent().toggleClass("selected");
  });
}
$(document).ready(function (){
  customCheckbox("room[]");
})

HTML

<div class="row">
<div class="large-3 right columns">
       <label><input type="checkbox" name="room[]" value="" /></label>
 </div>
</div>

<div class="row">
<div class="large-3 right columns">
       <label><input type="checkbox" name="request[]" value="" /></label>
 </div>
</div>

编辑**

删除函数和修改脚本：

<script>
 $(document).ready(function (){
        $("input:checkbox").each(function(){
    if($(this).attr("name") == "room[]") {
       $(this).wrap( "<span class='custom-checkbox'></span>" );
       if($(this).is(':checked')){
                $(this).parent().addClass("selected");
            }
    } else if($(this).attr("name") == "request[]") {
       $(this).wrap( "<span class='custom-checkbox2'></span>" );
       if($(this).is(':checked')){
                $(this).parent().addClass("selected");
            }
    }
});

    })
</script>

Answer 1

您可以使用“每个”jQuery 函数，该函数将检查页面上复选框类型的每个输入。所以，你很容易得到它的名字，如果它是“room[]”，将custom-checkbox-big-size类添加到span wrap，如果它的名字是“request[]”，将custom-checkbox-small-size类添加到span wrap（我改变了你的 CSS 让事情变得简单）。

JS：

var wrapSpan = $('<span class="custom-checkbox-span"</span>');
$('input:checkbox').each(function() {
    if ($(this).is(':checked')) {
        wrapSpanspan.addClass('checked');
    }
    if($(this).attr("name") == "room[]") {
        wrapSpan.addClass("custom-checkbox-big-size");
    }
    if($(this).attr("name") == "request[]") {
        wrapSpan.addClass("custom-checkbox-small-size");
    }
    $(this).wrap(wrapSpan).hide();
});

$(".custom-checkbox-span").on("mouseup",function(){
    checkSpan($(this));
});

function checkSpan(el) {
    if(el.hasClass("selected")) {
        el.removeClass("selected");
        el.children().prop("checked",false);
    } else {
        el.addClass("selected");
        el.children().prop("checked",true);
    }
}

CSS：

.custom-checkbox-big-size {
    background:red;
    width: 50px;
    height: 50px;
    display: inline-block;
}
.custom-checkbox-big-size:hover, .custom-checkbox-big-size.selected {
    background:yellow;
}
.custom-checkbox-small-size {
    background:blue;
    width: 20px;
    height: 20px;
    display: inline-block;
}
.custom-checkbox-small-size:hover, .custom-checkbox-small-size.selected {
    background:green;
}

检查jsFiddle。我是用颜色做的，因为我没有你的原始图片，你必须改变background: color;规则。

Answer 2

这是在选择器中处理的，假设您使用的是 CSS3，就像这样......

input[type*='checkbox'][name*='room'] {
    ... styles here
}