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

Question

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

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