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

Question

我必须在同一个页面上使用两个不同大小的复选框。我将根据复选框 name 来确定使用哪种尺寸。如果name='room'我就用class'custom-checkbox'的大图。否则如果 name='request'，我将使用 class custom-checkbox2.

的小图像

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

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

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

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

Answer 2

您可以使用"each" jQuery 函数，它将检查页面上复选框类型的每个输入。所以，你简单地得到它的名字，如果它是 "room[]"，添加 custom-checkbox-big-size class 到 span wrap，如果它的名字是 "request[]"，添加 custom-checkbox-small-size class 到跨度换行（我更改了你的 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; 规则。

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

How do I manipulate the same function in javascript for two different classes

javascript

css

checkbox

jquery

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

How do I manipulate the same function in javascript for two different classes

javascript

css

checkbox

jquery

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