Question

我是设计师，代码不是我的强者。我使这个代码按预期工作，我想干它：

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

您可以尝试这样的事情：

$('#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");
      }
    });
});

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

见内联评论：

$(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());    
 });
  
});

干一个简单的jQuery代码

3 个答案: