Javascript Dry是一个简单的jQuery代码

我是设计师，代码不是我的强项。我制作的这段代码按照预期工作，我想将其晾干：

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


 });

});

有人能帮我吗？提前非常感谢。

请参阅在线评论：

$（函数（）{
//您只需要一个显示/隐藏元素的函数。
//简单地说，让该函数期望正确的元素
//被传给它。
函数doStuff（dispNoneArray，listItemObject）{
$（dispneonearray.parent（）.css（'display'，'none'）；
$（listItemObject）.parent（）.css（'display'，'list-item'）；
}  
//现在，只要在适当的时候调用该函数，并将其传递给正确的对象：
$（“#可配置的"样本"颜色li.is-media a[name=preto]”）。on（'click'，function（）{
doStuff（[$（“#购物者(u画廊)旋转木马.jcarousel项目a[title=cor bege]”）。parent（），
$（“#shopper_gallery_carousel.jcarousel项目a[title=cor cafe]”。parent（）]，
美元（“#购物者#画廊(carousel.jcarousel项目a[title=cor preta]”）；
});
$（“#可配置的"样本"颜色li.is-media a[name=caf-]）。在（'click'，function（）上{
doStuff（[$（“#购物者(u画廊)旋转木马.jcarousel项目a[title=cor bege]”）。parent（），
$（“#shopper_gallery_carousel.jcarousel项目a[title=cor preta]”）。parent（）]，
$（“#shopper_gallery_carousel.jcarousel项目a[title=cor cafe]”。parent（））；
});
$（“#可配置的_-swatch_-color li.is-media a[name=bege]”）。在（'click'，function（）上{
doStuff（[$（“#购物者(u画廊)旋转木马.jcarousel项目a[title=cor preta]”）。parent（），
$（“#shopper_gallery_carousel.jcarousel项目a[title=cor cafe]”。parent（）]，
$（“#shopper_gallery_carousel.jcarousel项目a[title=cor bege]”。parent（））；
});
});您可以尝试以下方法：

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

这又怎么干了？@mhodges它完美吗？不，它是否传达了这样一种想法，即您不需要3个做相同事情的函数？对你看过评论了吗？没有，我看过评论了吗？对这个答案对OP和未来希望干涸代码的用户有用吗？不。这是一个非常不成熟的答案，对解决实际问题几乎没有什么作用，即3个几乎相同的选择器的单击处理程序，以及3个其他几乎相同的选择器/操作。@mhodges这是您的意见。答案非常清楚地指出并显示了如何将3个仅因元素而异的功能组合为一个。如果你不相信那是干的，那么你需要抬头看看。这是传达这一概念的一个很好的例子。正如我所说，它会一直持续下去吗？没有。但是OP（和未来的读者）有足够的时间来承担这个责任。我要说的唯一一件事是：我认为你高度低估了人们将他们在上面找到的代码复制/粘贴到生产环境中的频率。你提供了这样的答案，却没有解释你的答案是不完整的，你会做些什么来“一路接受”，这对社区是一种伤害。在我看来，这也是对OP问题的回答。通过保留功能将代码简化为更少的行。OP应为此设置绿色复选标记
$('#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");
      }
    });
});