Question

任何人都可以帮助我简化这个jQuery的工作吗？我听说forEach可以帮助我，但不知道如何使用它。

<script>
jQuery(document).ready(function($){

$("div#accordion .panel:nth-child(1)").click(function(){
$(".changer .vc_column-inner").css("cssText", "background-image: url(wp-content/uploads/2016/04/WLDMCHPLAY-QF-FANS1-e1469784860667.jpg) !important;");
});

$("div#accordion .panel:nth-child(2)").click(function(){
$(".changer .vc_column-inner").css("cssText", "background-image: url(wp-content/uploads/2016/04/mountains-snow-cars-bentley-roads-vehicles-bentley-continental-bentley-continental-gt-front-angle-vi-2015.jpg) !important;");
});

$("div#accordion .panel:nth-child(3)").click(function(){
$(".changer .vc_column-inner").css("cssText", "background-image: url(wp-content/uploads/2016/04/1007.jpg) !important;");
});

}(jQuery));
</script>

Answer 1

您可以使用数组简化它。将CSS属性值存储在数组中并根据元素索引更新值（索引可以使用index()方法获取）。

jQuery(document).ready(function($) {
  // store URLs in an array for selecting based on the index
  var css = [
    "url(wp-content/uploads/2016/04/WLDMCHPLAY-QF-FANS1-e1469784860667.jpg) !important;",
    "url(wp-content/uploads/2016/04/mountains-snow-cars-bentley-roads-vehicles-bentley-continental-bentley-continental-gt-front-angle-vi-2015.jpg) !important;",
    "url(wp-content/uploads/2016/04/1007.jpg) !important;"
  ],
    // store the reference to the element for future reference 
  $ele = $("div#accordion .panel").click(function() {
    // get the css value based the index of clicked element
    // with help of referenced variable , here index means the position within the referenced selector
    // where `this` refer to the clicked element
    $(".changer .vc_column-inner").css("cssText", "background-image:" + css[$ele.index(this)]);
  });
}(jQuery));

Answer 2

（代表OP发布）。

感谢Pranav C Balan，我得出了最终答案：

<script>
jQuery(document).ready(function($) {

  var css = [
    "url(wp-content/uploads/2016/04/WLDMCHPLAY-QF-FANS1-e1469784860667.jpg)  !important;",
    "url(wp-content/uploads/2016/04/mountains-snow-cars-bentley-roads-vehicles-bentley-continental-bentley-continental-gt-front-angle-vi-2015.jpg)  !important;",
    "url(wp-content/uploads/2016/04/1007.jpg) !important;"
  ],

  $ele = $("div#accordion .panel").click(function() {
    $(".changer .vc_column-inner").css("cssText", "background-image:" + css[$ele.index(this)]);
  });
}(jQuery));
</script>

Answer 3

不要从jQuery应用图片。而是使用CSS中的类并通过jQuery添加类。

使用此类解决方案的优点是，如果您想添加或更改图像，则无需更改JS。

以下代码将生成带索引的类。

像这样将CSS应用于他们

CSS代码

.backGroud0{
background:url('wp-content/uploads/2016/04/WLDMCHPLAY-QF-FANS1-e1469784860667.jpg');
}
.backGroud1{
background:url('wp-content/uploads/2016/04/mountains-snow-cars-bentley-roads-vehicles-bentley-continental-bentley-continental-gt-front-angle-vi-2015.jpg');
}
.backGroud2{
background:url('wp-content/uploads/2016/04/1007.jpg');
}

JS CODE

jQuery( ".div#accordion .panel" ).each( function(index, value){
 jQuery( this ).click( function(){
   jQuery( this ).addClass( "backGround" + index );
 });
});

请帮我简化以下代码

3 个答案: