Javascript 有没有办法消除代码中的冗余？

我有一堆Jquery，根据单击的是li1、li2还是li3，将DivA的内容替换为DivB、DivC、DivD的内容

然而，Jquery本质上是为每个可替换元素重复的同一段代码

因此，如果我在一个页面上有2个部分，每个部分有3个内容可供选择，Jquery代码就会变得很长

有没有一种方法可以去掉这个功能，但仍然保持相同的功能

这是每个li的代码-

$('.1').click(function () {
    $('.mainDescription').fadeOut(400, function () {
        $('.mainDescription').html($('#desc1').html()).fadeIn(200);
    });
    $('.mainImage').fadeOut(400, function () {
        $('.mainImage').html($('#desc1Image').html()).fadeIn(200);
    });
})

.1是单击的li的类

.mainDescription是显示可视文本内容的Div

.mainImage是显示可见图像的Div

Div#desc1是在单击.li1时从中提取文本内容的隐藏Div

Div#desc1Image是单击/li1时从中提取图像内容的隐藏Div

一个完整的工作示例可以在这里找到

---

您可以创建一个为您执行此任务的函数，并使用传入的Jquery选择器调用此函数

例如

 function customFade(description, newDesc, image, newImage) {
    $(description).fadeOut(400, function() {
      $(description).html($(newDesc).html()).fadeIn(200);
    });
    $(image).fadeOut(400, function() {
      $(image).html($(newImage).html()).fadeIn(200);
    });
  }

这样称呼它

customFade('.mainDescription2','#desc32','.mainImage2','#desc3Image2');

---

您可以创建一个为您执行此任务的函数，并使用传入的Jquery选择器调用此函数

例如

 function customFade(description, newDesc, image, newImage) {
    $(description).fadeOut(400, function() {
      $(description).html($(newDesc).html()).fadeIn(200);
    });
    $(image).fadeOut(400, function() {
      $(image).html($(newImage).html()).fadeIn(200);
    });
  }

这样称呼它

customFade('.mainDescription2','#desc32','.mainImage2','#desc3Image2');

---

一种简单的方法是使用它们的类名

我只更新了

description#1

的提琴。其余部分也可以用类似的方式

像这样：

  $('.1,.2,.3').click(function() {
    var myVar = $(this).attr("class");
    $('.mainDescription').fadeOut(400, function() {
      $('.mainDescription').html($('#desc' + myVar).html()).fadeIn(200);
    });
    $('.mainImage').fadeOut(400, function() {
      $('.mainImage').html($('#desc' + myVar + 'Image').html()).fadeIn(200);
    });
  })

---

一种简单的方法是使用它们的类名

我只更新了

description#1

的提琴。其余部分也可以用类似的方式

像这样：

  $('.1,.2,.3').click(function() {
    var myVar = $(this).attr("class");
    $('.mainDescription').fadeOut(400, function() {
      $('.mainDescription').html($('#desc' + myVar).html()).fadeIn(200);
    });
    $('.mainImage').fadeOut(400, function() {
      $('.mainImage').html($('#desc' + myVar + 'Image').html()).fadeIn(200);
    });
  })

---

您可以创建一个函数并使用它：

var bindFading = function(sourceElem, targetElem){
  sourceElem.fadeOut(400, function () {
    sourceElem.html(targetElem.html()).fadeIn(200);
  });
};

$('.1').click(function () {
  bindFading($('.mainDescription'), $('#desc1'));
  bindFading($('.mainImage'), $('#desc1Image'));
});
$('.2').click(function () {
  bindFading($('.mainDescription'), $('#desc2'));
  bindFading($('.mainImage'), $('#desc2Image'));
})
$('.3').click(function () {
  bindFading($('.mainDescription'), $('#desc3'));
  bindFading($('.mainImage'), $('#desc3Image'));
});

JSFiddle：

或者您可以编写一个小型jquery插件，如：

$.fn.fading = function(targetElem){
    return this.each(function(){
     $(this).fadeOut(400, function () {
       $(this).html(targetElem.html()).fadeIn(200);
     });
  });
};

$('.1').click(function () {           
  $('.mainDescription').fading($('#desc1'));
  $('.mainImage').fading($('#desc1Image'));
})
$('.2').click(function () {
  $('.mainDescription').fading($('#desc2'));
  $('.mainImage').fading($('#desc2Image'));
})
$('.3').click(function () {
  $('.mainDescription').fading($('#desc3'));
  $('.mainImage').fading($('#desc3Image'));
});

---

jsIDLE:

您可以创建一个函数并使用它：

var bindFading = function(sourceElem, targetElem){
  sourceElem.fadeOut(400, function () {
    sourceElem.html(targetElem.html()).fadeIn(200);
  });
};

$('.1').click(function () {
  bindFading($('.mainDescription'), $('#desc1'));
  bindFading($('.mainImage'), $('#desc1Image'));
});
$('.2').click(function () {
  bindFading($('.mainDescription'), $('#desc2'));
  bindFading($('.mainImage'), $('#desc2Image'));
})
$('.3').click(function () {
  bindFading($('.mainDescription'), $('#desc3'));
  bindFading($('.mainImage'), $('#desc3Image'));
});

JSFiddle：

或者您可以编写一个小型jquery插件，如：

$.fn.fading = function(targetElem){
    return this.each(function(){
     $(this).fadeOut(400, function () {
       $(this).html(targetElem.html()).fadeIn(200);
     });
  });
};

$('.1').click(function () {           
  $('.mainDescription').fading($('#desc1'));
  $('.mainImage').fading($('#desc1Image'));
})
$('.2').click(function () {
  $('.mainDescription').fading($('#desc2'));
  $('.mainImage').fading($('#desc2Image'));
})
$('.3').click(function () {
  $('.mainDescription').fading($('#desc3'));
  $('.mainImage').fading($('#desc3Image'));
});

JSIDLE:

我希望这能奏效

我做了一些更改，使您的li元素具有添加图像和描述所需的所有信息。因此，当你点击一个li时，它会从该li获取信息并将其发布到你的div中。因此，你只需要一个函数，而不需要隐藏div

说明： 如果向元素添加事件，则可以将函数内部的元素称为“this”。因此，如果您将同一事件添加到多个元素中，您仍然可以确切地知道是谁使用“this”触发了它。由于您的li元素已经知道图像（它们包含相同的图像），您可以只获取该信息而不创建隐藏的div。但是您的li元素不知道目标div的描述和名称。因此我添加了这些信息

编辑：我更改了它，这样您就可以像示例中那样拥有多个div

$（文档）.ready（函数（）{
$（'.clickable'）。单击（函数（）{
var src=$（this.children（“img”）.attr（“src”）；
var des=$（this.children（“img”）.attr（“数据台”）；
var tar=$（this.children（“img”）.attr（“数据目标”）；
$（'.+tar+'Description'）。淡出（400，函数（）{
$（'.'.+tar+'Description'）.html（des）.fadeIn（200）；
});
$（'.'.+tar+'Image'）。淡出（400，函数（）{
$（'.'.+tar+'Image'）.html（''）.fadeIn（200）；
});
})
});
*{
框大小：边框框；
}
身体{
宽度：500px；
}
img{宽度：100%；高度：自动；}
.集装箱{
右侧填充：15px；
左侧填充：15px；
右边距：自动；
左边距：自动；
宽度：500px；
}
.行{
右边距：-15px；
左边距：-15px；
}
.col-xs-6{
位置：相对位置；
最小高度：1px；
宽度：50%；
浮动：左；
左侧填充：15px；
右侧填充：15px；
}
.col-xs-12{
位置：相对位置；
最小高度：1px；
宽度：100%；
浮动：左；
左侧填充：15px；
右侧填充：15px；
}
.img响应{
显示：块；
最大宽度：100%；
高度：自动；
}
保险商实验室{
列表样式类型：无；
光标：指针；
}
ulli{
显示：内联块；
宽度：100px；
}







Lorem ipsum dolor sit amet，是一位杰出的献身者。非莫利斯葡萄园。在pharetra orci eget mollis Comodo

我希望这能奏效


我做了一些更改，使您的li元素具有添加图像和描述所需的所有信息。因此，当你点击一个li时，它会从该li获取信息并将其发布到你的div中。因此，你只需要一个函数，而不需要隐藏div

说明：
如果向元素添加事件，则可以将函数内部的元素称为“this”。因此，如果您将同一事件添加到多个元素中，您仍然可以确切地知道是谁使用“this”触发了它。由于您的li元素已经知道图像（它们包含相同的图像），您可以只获取该信息而不创建隐藏的div。但是您的li元素不知道目标div的描述和名称。因此我添加了这些信息

编辑：我更改了它，这样您就可以像示例中那样拥有多个div


$（文档）.ready（函数（）{
$（'.clickable'）。单击（函数（）{
var src=$（this.children（“img”）.attr（“src”）；
var des=$（this.children（“img”）.attr（“数据台”）；
var tar=$（this.children（“img”）.attr（“数据目标”）；
$（'.+tar+'Description'）。淡出（400，函数（）{
$（'.'.+tar+'Description'）.html（des）.fadeIn（200）；
});
$（'.'.+tar+'Image'）。淡出（400，函数（）{
$（'.'.+tar+'Image'）.html（''）.fadeIn（200）；