有没有办法消除这个代码中的重复？

我有一堆Jquery，用DivB，DivC，DivD的内容替换DivA的内容，取决于是否点击li1，li2或li3。有没有办法消除这个代码中的重复？

但是，Jquery本质上是每个可替换元素重复的代码片段。因此，如果我在页面上有两个部分，每个部分都有三段内容可供选择，那么Jquery代码就会变得非常长。

有没有办法去掉这个但仍然保持相同的功能？

这是每个L1码 -

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

.1类被点击的李。

.mainDescription是可见文本内容出现的Div。

.mainImage是可见图像出现的Div。

Div＃desc1是当点击.li1时文本内容被拉出的隐藏div。

Div＃desc1Image是单击/ li1时图像内容被拉出的隐藏div。

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

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

来源

2017-03-15 Fazy

我希望这可以工作。

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

我做了一些修改，让li元素必须添加图像和描述中所需要的所有信息。所以当你点击一个li时，它会从该li获取信息并将其发布到你的div中。所以你只需要一个功能，没有隐藏的div。

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

编辑：我改变它，这样你可以有多个div在你的例子中。

$(document).ready(function() { 
 
      $('.clickable').click(function() { 
 
      \t \t 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>

来源

2017-03-15 12:15:14 Nyxeen

这真棒，我真的很感谢解释，但我似乎无法得到它的工作，如果我复制的div，当我点击其中一个李的，它会更改两个div中的主图像和说明。 https://jsfiddle.net/qeq82y42/7/ – Fazy

您的图像中的img具有数据目标属性。它指的是它使用的div。 data-target =“main”使用mainDescription div。 data-taget =“main2”将使用div main2Description。 Image div相同。 https://jsfiddle.net/nyxeen/qeq82y42/8/ – Nyxeen

我也在我的拳头帖子中犯了一个小错误。修复。您无法复制该代码，您应该尝试了解其功能，以便您可以重新创建它。 – Nyxeen

您可以创建做这件工作给你一个函数，调用这个函数与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');

来源

2017-03-15 12:05:32 mohitmittal

我了个去，但我不知道我做了什么错？ https://jsfiddle.net/Lw1uL7qc/ – Fazy

您仍然必须将其绑定到单击事件:)。像这样的https://jsfiddle.net/qeq82y42/5/ – mohitmittal

一个简单的方法就是用自己的类名。

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); 
    }); 
    })

来源

2017-03-15 12:09:44

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

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/

来源

2017-03-15 12:13:22 maverickosama92

有没有办法消除这个代码中的重复？

回答

相关问题