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

Question

我有一堆 Jquery 将 DivA 的内容替换为 DivB、DivC、DivD 的内容，具体取决于是否单击了 li1、li2 或 li3。

但是，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。

可以在此处找到完整的工作示例...

https://jsfiddle.net/qeq82y42/1/

Answer 1

我希望这行得通。

https://jsfiddle.net/nyxeen/qeq82y42/9/

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

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

编辑：我对其进行了更改，以便您可以像示例中那样拥有多个 div。

$(document).ready(function () {
            $('.clickable').click(function () {
            		var src=$(this).children("img").attr("src");
                var des=$(this).children("img").attr("data-desk");
                var tar=$(this).children("img").attr("data-target");
                $('.'+tar+'Description').fadeOut(400, function () {
                    $('.'+tar+'Description').html(des).fadeIn(200);
                });
                $('.'+tar+'Image').fadeOut(400, function () {
                    $('.'+tar+'Image').html('<img src="'+src+'">').fadeIn(200);
                });
            })
});

* {
  box-sizing: border-box;
}

body {
  width: 500px;
}
img{width:100%;height:auto;}
.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  width: 500px;
}

.row {
  margin-right: -15px;
  margin-left: -15px;
}

.col-xs-6 {
  position: relative;
  min-height: 1px;
  width: 50%;
  float: left;
  padding-left: 15px;
  padding-right: 15px;
}

.col-xs-12 {
  position: relative;
  min-height: 1px;
  width: 100%;
  float: left;
  padding-left: 15px;
  padding-right: 15px;
}

.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}

ul {
  list-style-type: none;
  cursor: pointer;
}

ul li {
  display: inline-block;
  width: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <ul>
        <li class="clickable"><img src="http://www.planwallpaper.com/static/images/abstract-colourful-cool-wallpapers-55ec7905a6a4f.jpg" class="img-responsive" data-desk="Description 1" data-target="main"></li>
        <li class="clickable"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRfs21_S1c5l_qDHy9PEyrlXLh75CChSVTpu3B3JjoV5kdQ_XXj" class="img-responsive"  data-desk="Description 2" data-target="main"></li>
        <li class="clickable"><img src="https://s-media-cache-ak0.pinimg.com/originals/ef/9c/22/ef9c22cd9f1030edb2b21883b5fbe0d8.jpg" class="img-responsive"  data-desk="Description 3" data-target="main"></li>
      </ul>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-6 mainImage">
      <img src="http://www.planwallpaper.com/static/images/abstract-colourful-cool-wallpapers-55ec7905a6a4f.jpg" class="img-responsive" />
    </div>
    <div class="col-xs-6 mainDescription">
      <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc varius convallis elit non mollis. In pharetra orci eget mollis commodo
      </p>
    </div>
  </div>
</div>

Answer 2

您可以创建一个为您完成这项工作的函数，并使用传入的 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');

Answer 3

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

JSFIDDLE

我只更新了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);
    });
  })

Answer 4

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

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：https://jsfiddle.net/qeq82y42/4/

或者你可以写一个小的 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'));
});

JSFiddle：https://jsfiddle.net/qeq82y42/3/