Question

我有一堆Jquery用DivB，DivC，DivD的内容替换DivA的内容，具体取决于是否点击了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

一种简单的方法是使用他们的className。

<强> 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/

有没有办法消除此代码中的reduncancy？

4 个答案: