CODEWITHSUNDEEP
javascriptjquery
Sony ThePony
Sony ThePony

Reputation: 311

Please help me simplify the following code

Can anyone assist me in simplifying this working piece of jQuery? I've heard that forEach could help me there, but don't know how to use it.

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

Upvotes: -2

Views: 121

Answers (3)

pranav-dev
pranav-dev

Reputation: 68

Don't apply images from jQuery. Instead use classes in CSS and add classes through jQuery.

Advantage of using such solution is you don't have to change the JS if you want to add or change the image.

Following code will generate the classes with index.

Apply css to them like this

CSS Code

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

Upvotes: 0

halfer
halfer

Reputation: 20439

(Posted on behalf of the OP).

Thanks to Pranav C Balan I came to the final answer of:

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

Upvotes: 0

Pranav C Balan
Pranav C Balan

Reputation: 115222

You can simplify it using an array. Store the CSS property value in an array and update value based on element index (index can be get using index() method).

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

Upvotes: 1

Related Questions