ansaurus

Question

Help me to simplify my jQuery, it's growing huge and redundant!

Answer 1

+10 A:

$("a[color]").each(function() {        
    $(this).click(function () {
        var color = $(this).attr('color');
        $("#selectCuff img").removeClass("visible");
        $("img[color="+color+"]").addClass("visible");
    });
});

like that?

Also you can play with context css classes like that

#select img { 
    display:none;
}
#select.red img.red{
    display:inline;
}

and add/remove color class on #select div

I've just realize that you don't even need 'each' here

$("a[color]").click(function() {                
    var color = $(this).attr('color');
    $("#selectCuff img").removeClass("visible");
    $("img[color="+color+"]").addClass("visible");
});

in markup

<a href="#" color="grey">show grey</a>
<div id="select">
<img src="grey_collar.png" height="250" width="250" color="grey" />
<img src="red_collar.png" height="250" width="250" color="red" />
</div>

vittore 2010-04-06 20:25:13

Thats pretty cool, much better than my attempt!!

Mark Redman 2010-04-06 20:27:54

hope this helps

vittore 2010-04-06 20:30:59

This looks amazing. Can you run me through on how this works? Is this solution assuming I am using the CSS color attribute? If so, I am not. My code posted above may have been misleading with the color ID and class names. This page is more of a mockup that will list potentially over 100 types of materials etc.

liquilife 2010-04-06 21:23:49

this code suggest you will use custom attribute `color`. Each `img` should have it and each `a`. On `click` of `a` it will takes the value from color attribute of a, hide all `img` and show only `img` that have attribute color with the same value

vittore 2010-04-06 21:28:14

I wouldn't get in the habit of storing data in custom attributes. A better option here would be to use classes.

TheJuice 2010-04-06 22:03:44

@TheJuice: Totaly agree, that's just the first came in mind

vittore 2010-04-06 22:23:47

You can use `data-` attribute in HTML5 (ref: http://ejohn.org/blog/html-5-data-attributes/)

fudgey 2010-04-06 23:54:39

@fudgey: looks reasonable, but class attribute is more convenient when using with jquery

vittore 2010-04-06 23:59:00

Answer 2

A:

You could do something like this? (check for corrct case etc..not tested)

<script> 

function setupMaterialsClick(name)
{
   $("a#" + name).click(function () { 
       $("#selectMaterials img").removeClass("visible"); 
       $("img.select" + name).addClass("visible"); 
   }); 
}

$(document).ready(function () 
{ 

   // Changing the Materials 
   setupMaterialsClick("shirtred");
   // etc

   // Other bits

}); 

}); 
</script>

Mark Redman 2010-04-06 20:26:55

Answer 3

A:

Change your classes to match the case of the ids of the links, then do something like:

$('materials a').bind(changeSelection);
$('collars a').bind(changeSelection);
$('cuffs a').bind(changeSelection);
$('pockets a').bind(changeSelection);

function changeSelection()
{
 var id = $(this).attr('id');
 var selectClass = 'img.select'+id;
 $("#selectPocket img").removeClass("visible"); 
 $(selectClass).addClass("visible"); 
}

VexedPanda 2010-04-06 20:27:45

Answer 4

A:

$("a").each(function() {
  $(this).click(function() {
    var src = $(this).children("img").attr("src");
    var img = $(".selectionimg").find("img[src$='"+src+"']");
    img.addClass("visible").siblings().removeClass("visible");
    return false;
  });
});

This assumes, that the selected images are the same src as the corresponding clickable images.

Duddle 2010-04-06 21:01:32

Answer 5

A:

I haven't had a chance to test this with images, but you can shorten your HTML and script as follows:

$(document).ready(function(){
 /* names in the materials variable must match the image file name */
 /* the script will form the filename as follows: grey_shirt.png */
 var materials = {
  'shirt'  : ["grey", "red", "blue", "green"],
  'collar' : ["grey", "red", "blue", "green"],
  'cuff'   : ["grey", "red", "blue", "green"],
  'pocket' : ["grey", "red", "blue", "green"]
 }
 /* Set up Content */
 var i, c = '', s = '<div class="selectionimg">';
 $.each(materials, function(key, value){
  c += '<div class="' + key + '">';
  s += '<div class="select' + key + '">';
  for (i=0; i<value.length; i++) {
   c += '<a href="#" rel="' + value[i] + '"><img class="thumb" src="' + value[i] + '_' + key + '.png"></a>';
   s += '<img src="' + value[i] + '_' + key + '.png" height="250" width="250" class="large-img select' + value[i];
   s += (i==0) ? ' show" />' : ' hide" />'; // add show class only the first selection
  }
  c += '</div>';
  s += '</div>';
 })
 $('#content').html(c + s + '</div>');

 /* Set up scripting */
 $('#content a').click(function(){
  var type = $(this).parent().attr('class');
  var color = $(this).attr('rel');
  $('.select' + type).find('img').removeClass('visible').end()
   .find('img.select' + color).addClass('visible');
  return false;
 })
})

fudgey 2010-04-06 23:17:16

ansaurus

tags:

views:

answers:

Help me to simplify my jQuery, it's growing huge and redundant!

related questions