幹一個簡單的jQuery代碼

Question

我是設計師，代碼不是我的強。我讓這段代碼按預期工作，我想DRY它：

$(document).ready(function(){ 

$('#configurable_swatch_color li.is-media a[name=preto]').on('click', function(){ 

    $("#shopper_gallery_carousel .jcarousel-item a[title=cor-bege]").parent().css('display','none'); 

    $("#shopper_gallery_carousel .jcarousel-item a[title=cor-cafe]").parent().css('display','none'); 

    $("#shopper_gallery_carousel .jcarousel-item a[title=cor-preta]").parent().css('display','list-item'); 


}); 

$('#configurable_swatch_color li.is-media a[name=caf-]').on('click', function(){ 

    $("#shopper_gallery_carousel .jcarousel-item a[title=cor-bege]").parent().css('display','none'); 

    $("#shopper_gallery_carousel .jcarousel-item a[title=cor-preta]").parent().css('display','none'); 

    $("#shopper_gallery_carousel .jcarousel-item a[title=cor-cafe]").parent().css('display','list-item'); 


}); 

$('#configurable_swatch_color li.is-media a[name=bege]').on('click', function(){ 

    $("#shopper_gallery_carousel .jcarousel-item a[title=cor-preta]").parent().css('display','none'); 

    $("#shopper_gallery_carousel .jcarousel-item a[title=cor-cafe]").parent().css('display','none'); 

    $("#shopper_gallery_carousel .jcarousel-item a[title=cor-bege]").parent().css('display','list-item'); 


}); 

}); 

任何人都可以幫助我嗎？提前致謝。

Answer 1

看評論在線：

$(function(){ 
 

 
    // You only need one function that shows/hides elements. 
 
    // Simply, make that funciton expect the correct elements 
 
    // be passed in to it. 
 
    function doStuff(dispNoneArray, listItemObject){ 
 
    $(dispNoneArray).parent().css('display','none'); 
 
    $(listItemObject).parent().css('display','list-item'); 
 
    } 
 
    
 
// Now, just call the function when appropriate, and pass it the right objects: 
 
$('#configurable_swatch_color li.is-media a[name=preto]').on('click', function(){ 
 
    doStuff([$("#shopper_gallery_carousel .jcarousel-item a[title=cor-bege]").parent(), 
 
      $("#shopper_gallery_carousel .jcarousel-item a[title=cor-cafe]").parent()], 
 
      $("#shopper_gallery_carousel .jcarousel-item a[title=cor-preta]")); 
 
}); 
 

 
$('#configurable_swatch_color li.is-media a[name=caf-]').on('click', function(){ 
 
    doStuff([ $("#shopper_gallery_carousel .jcarousel-item a[title=cor-bege]").parent(), 
 
      $("#shopper_gallery_carousel .jcarousel-item a[title=cor-preta]").parent()], 
 
      $("#shopper_gallery_carousel .jcarousel-item a[title=cor-cafe]").parent()); 
 
}); 
 

 
$('#configurable_swatch_color li.is-media a[name=bege]').on('click', function(){ 
 
    doStuff([ $("#shopper_gallery_carousel .jcarousel-item a[title=cor-preta]").parent(), 
 
      $("#shopper_gallery_carousel .jcarousel-item a[title=cor-cafe]").parent()], 
 
      $("#shopper_gallery_carousel .jcarousel-item a[title=cor-bege]").parent());  
 
}); 
 
    
 
});

Answer 2

$(document).ready(function() { 
    //get all the links that you care about, store them in an jQuery object for later reference 
    var $mediaLinks = $('#configurable_swatch_color li.is-media a').filter(function(){ return ['preto','caf-','bege'].indexOf(this.name) > -1; }); 
    var $carouselLinks = $("#shopper_gallery_carousel .jcarousel-item a").filter(function(){ return ['cor-bege','cor-cafe','cor-preta'].indexOf(this.title) > -1; }); 
    //map your names to your titles 
    var titlesByName = [ 
     preto: 'cor-preta' 
     , 'caf-': 'cor-cafe' 
     , bege: 'cor-bege' 
    ]; 

    $mediaLinks.on('click', function(e){ 
     //get related carousellink 
     var $carouselLink = $carouselLinks.filter(function(){ return this.title === titlesByName[e.target.name]; }); 

     //if it is not already visible, hide other things and show it 
     if ($carouselLink.parent().css('display') != 'list-item') { 
      //hide others 
      $carouselLinks.not($carouselLink).parent().hide(); 
      //and finally show the one clicked 
      $carouselLink.parent().css('display', 'list-item'); 
     } 
    }); 
}); 

Answer 3

你可以嘗試這樣的事情：

$('#configurable_swatch_color li.is-media').on('click', 'a[name]', function(){ 
    var name = $(this).attr("name"); 
    $("#shopper_gallery_carousel .jcarousel-item").find("a[title]").each(function(){ 
     if ($(this).attr("title").indexOf(name) > -1) { 
     $(this).parent().css("display", "list-item"); 
     } 
     else { 
     $(this).parent().css("display", "none"); 
     } 
    }); 
});