CODEWITHSUNDEEP
jquerysimplify
user1189771
user1189771

Reputation: 31

How can I simplify this jQuery code?

I'm trying to make each div slightly more opaque than the others, one at a time. As you can see I simplified some of it already by making variables.

var f1 = $('#f1');
var f2 = $('#f2');
var f3 = $('#f3');
var f4 = $('#f4');

if(art==1){
f1.css('opacity',1);
f2.css('opacity',0.9);
f3.css('opacity',0.9);
f4.css('opacity',0.9);
}else if(art==2){
f1.css('opacity',0.9);
f2.css('opacity',1);
f3.css('opacity',0.9);
f4.css('opacity',0.9);
}else if(art==3){
f1.css('opacity',0.9);
f2.css('opacity',0.9);
f3.css('opacity',1);
f4.css('opacity',0.9);
}else if (art==4){
f1.css('opacity',0.9);
f2.css('opacity',0.9);
f3.css('opacity',0.9);
f4.css('opacity',1);
}

Upvotes: -1

Views: 127

Answers (3)

TrL
TrL

Reputation: 30

This isn't much simplified, but a good structure.

var f1 = $("#f1"),
f2 = $("#f2"),
f3 = $("#f3"),
f4 = $("#f4");
art == 1 ? (f1.css("opacity", 1), f2.css("opacity", .9), f3.css("opacity", .9), f4.css("opacity", .9)) : art == 2 ? (f1.css("opacity", .9), f2.css("opacity", 1), f3.css("opacity", .9), f4.css("opacity", .9)) : art == 3 ? (f1.css("opacity", .9), f2.css("opacity", .9), f3.css("opacity", 1), f4.css("opacity", .9)) : art == 4 && (f1.css("opacity", .9), f2.css("opacity", .9), f3.css("opacity", .9), f4.css("opacity", 1))

Upvotes: 0

Matt Wolfe
Matt Wolfe

Reputation: 9294

$("#f1,#f2,#f3,#f4").css("opacity", 0.9);
$("#f" + art).css("opacity", 1);

or in 1 line you could do:

$("#f1,#f2,#f3,#f4").css("opacity", 0.9).filter("#f" + art).css("opacity", 1);

I highly doubt you would see the change in opacity for div corresponding to #f+art but if you did there is a way you could fix it like this:

$("#f1,#f2,#f3,#f4").not("#f" + art).css("opacity", 0.9);
$("#f" + art).css("opacity", 1);

which is kind of weird to filter out one of the values we specified already but I think otherwise you would need to use extra logic to remove that value.

PS. This is a code smell (f+art)

Upvotes: 4

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196296

How about 

var f1 = $('#f1');
var f2 = $('#f2');
var f3 = $('#f3');
var f4 = $('#f4');

var fAll = $([f1, f2, f3, f4]);

fAll
   .css('opacity',0.9)
   .eq(art-1) // -1 because arrays are 0-based
   .css('opacity',1);

You should read a bit about how jQuery uses resultsets (not just single elements) and how to traverse and manipulate them

Upvotes: 0

Related Questions