Gibt es eine Möglichkeit, reduncancy in diesem Code zu beseitigen?

Question

Ich habe eine Reihe von Jquery, die den Inhalt von DivA durch den Inhalt von DivB, DivC, DivD ersetzt, je nachdem, ob li1, li2 oder li3 angeklickt wird.

Allerdings ist die Jquery im Wesentlichen das gleiche Stück Code für jedes einzelne austauschbare Element wiederholt.

Also, wenn ich 2 Abschnitte auf einer Seite habe, jeder mit 3 Abschnitten des Inhalts zur Auswahl, wird der Jquery-Code sehr lang.

Gibt es eine Möglichkeit, dies zu entfernen, aber immer noch die gleiche Funktionalität?

Dies ist der Code für jede 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 ist die Klasse der li, der auf geklickt wird.

.mainDescription ist die Div, in der der sichtbare Textinhalt angezeigt wird.

.mainImage ist die Div, in der das sichtbare Bild angezeigt wird.

Div # desc1 ist das versteckte Div, aus dem der Textinhalt gezogen wird, wenn auf .li1 geklickt wird.

Div # desc1Image ist das verborgene Div, von dem der Bildinhalt stammt, wenn/li1 angeklickt wird.

Ein komplettes Arbeitsbeispiel finden Sie hier ...

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

Answer 1

Ich hoffe, das funktioniert.

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

ich einige Änderungen haben, so dass Ihre li Elemente haben alle erforderlichen Informationen, um das Bild und die Beschreibung hinzuzufügen. Wenn Sie also auf ein li klicken, werden die Informationen aus diesem li übernommen und in Ihr div hochgeladen. Du brauchst also nur eine Funktion und keine versteckten Divs.

Erläuterung: Wenn Sie einem Element ein Ereignis hinzufügen, können Sie dieses Element innerhalb der Funktion als 'dieses' bezeichnen. Wenn Sie also das gleiche Ereignis zu mehreren Elementen hinzufügen, wissen Sie immer noch genau, wer es ausgelöst hat, indem Sie 'this' verwendet haben. Da Ihre li-Elemente das Bild bereits kennen (sie enthalten dasselbe), können Sie diese Informationen einfach aufnehmen, ohne ein verstecktes div zu erstellen. Aber Ihre li-Elemente kennen die Beschreibung und den Namen des Zieldivs nicht. Also habe ich diese Informationen hinzugefügt.

Edit: Habe ich es so, dass Sie mehrere divs wie in Ihrem Beispiel haben kann.

$(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>

Answer 2

Sie eine Funktion erstellen können, die diese Arbeit für Sie erledigt und diese Funktion mit den Wählern in geben Jquery rufen.

für Beispiel

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

und nennen Sie es wie diese

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

Answer 3

Einer der einfachste Weg ist, ihre Klassenname zu verwenden.

JSFIDDLE

Ich habe nur die Geige aktualisiert description#1 .Sie für den Rest in ähnlicher Weise tun können.

So:

$('.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

Sie eine Funktion erstellen und verwenden können es:

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/

Oder Sie könnten ein kleines jQuery Plugin wie schreiben:

$.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/