Question

我想缩短下面的代码，但我不知道该怎么做。有什么想法吗？

$(document).ready(function(){
    $('#mycheckbox').click(function(){
        var item = $(this).attr('#mycheckbox');
        $('.circle').fadeToggle(500);
    });
    $('#mycheckbox2').click(function(){
        var item = $(this).attr('#mycheckbox2');
        $('.circle2').fadeToggle(500);
    });
    $('#mycheckbox3').click(function(){
        var item = $(this).attr('#mycheckbox3');
        $('.circle3').fadeToggle(500);
    });    
    $('#mycheckbox4').click(function(){
        var item = $(this).attr('#mycheckbox4');
        $('.circle4').fadeToggle(500);
    });
});

编辑HTML：

<div class="circle"><img src="http://www.test.com/img.jpg" /></div>
<div class="circle2"><img src="http://www.test.com/img2.jpg" /></div>
<div class="circle3"><img src="http://www.test.com/img3.jpg" /></div>
<div class="circle4"><img src="http://www.test.com/img4.jpg" /></div>

Answer 1

您需要的是Selector Wildcard

示例：

<div id="jander1"></div>
<div id="jander2"></div>

<script>
    console.log($('[id*=ander]'));//will select all elements that have the string 'ander' included in their id. 
</script>

与您的代码相关：

 //select all elements that contain mycheckbox in their id attribute. 
$('[id^=mycheckbox]').click(function(){
        var thisId = $(this).attr("id");//get the actual full id of the clicked element.
        var checkBoxNum = thisId .substr(thisId.length-1); //get the last character (the number)
        //what does the this line do?
        var item = $(this).attr('#mycheckbox'+checkBoxNum ); //use the number to get the attributes. //I don't know why you need this! why creating a seperate attribute with the id? 

        $('.circle'+checkBoxNum ).fadeToggle(500);//now we can fade in the desired circle, if mycheckbox3 is clicked, then circle3 will fade toggle. 
    });

<强>更新

如果您的列表变大且包含许多数字（未知数量的字符，例如1,001,325等），那么您可以使用短划线或下划线分隔ID名称和数字，以便您可以使用split。

str.split('_')[1]; //to get the second part.

要查看实际操作：

    //e.g. mycheckbox_55
   $('[id^=mycheckbox_]').click(function(){
    var thisId = $(this).attr("id");//get the actual full id of the clicked element.
    var checkBoxNum = thisId.split('_')[1];  //get all characters after _ 
   ..

Answer 2

是的，您可以在一个选择子句中选择多个元素。

此处：https://api.jquery.com/multiple-selector/

从那里可以看出，您可以使用,分隔多个元素，并使用以下字符分隔它们：

$('el1, el2, el3').click(function () {
   /* code here */
}

这样你可以选择多个元素并在它们上面执行代码！

因此，您的代码将缩短为：

$('#mycheckbox, #mycheckbox2, #mycheckbox3, #mycheckbox4').click(function () {
   var id = $(this).attr('id'); // get the id
   if(id == 'mycheckbox') {
     $('.circle').fadeToggle(500); // circle without number
   }
   /* add else statements... */
}

Answer 3

如何通过一些html更改缩短它？

JS：

$(document).ready(function(){
    //.on("click",function(){ ... }) is just a bit better.
    $('[id^=mycheckbox]').on("click",function(){
        var target = $(this).data('target'); 
        $('.'+target).fadeToggle(500);
    });
});

HTML：

<!--Assuming you have these checkboxes, modify them as follows -->
<!--Adding data-target attributes to the checkboxes which contain
    the classes to identify the necessary div-->
<input id="mycheckbox1" type="checkbox" data-target = "circle1">
<input id="mycheckbox2" type="checkbox" data-target = "circle2">
<input id="mycheckbox3" type="checkbox" data-target = "circle3">
<input id="mycheckbox4" type="checkbox" data-target = "circle4">

<!--Adding a general class to the divs-->
<!--Adding a generic class to similar elements also allows 
    you to style all of them together if you want-->
<div class="circle circle1"><img src="http://www.test.com/img.jpg"></div>
<div class="circle circle2"><img src="http://www.test.com/img2.jpg"></div>
<div class="circle circle3"><img src="http://www.test.com/img3.jpg"></div>
<div class="circle circle4"><img src="http://www.test.com/img4.jpg"></div>

注意：您将在此处获得更多灵活性，并避免在您的js中出现任何类型的if-else阻止。

FIDDLE：http://jsfiddle.net/WRUa8/

jQuery - 选择多个类和ID

3 个答案: