Javascript Array klicken

Question

Ich versuche zu vermeiden, die gleichen Zeilen Javascript für den gleichen Zweck haben.

Ich habe 3 Sektionen:

<div class="specs"></div> 
<div class="description"></div> 
<div class="comments"></div> 

Und diese drei Verbindungen:

<a href="#" class="readMore desc">Produkt beskrivelse</a> 
<a href="#" class="readMore spec">Produkt specs</a> 
<a href="#" class="readMore facebook"></i>Kommentarer</a> 

Und diesen Javascript der auf Klick blättert zum Abschnitt

$(".facebook").on('click', function() { 
    $('html, body').animate({ 
     scrollTop: $(".comments").offset().top - 200 
    }, 1000); 
}); 

$(".readMore.desc").on('click', function() { 
    $('html, body').animate({ 
     scrollTop: $(".description").offset().top - 200 
    }, 1000); 
}); 

$(".readMore.spec").on('click', function() { 
    $('html, body').animate({ 
     scrollTop: $(".specs").offset().top - 200 
    }, 1000); 
}); 

Dieses 3 Stück JavaScript-Code ist ärgerlich, weil es genau dasselbe tut.

Ein Live-Beispiel kann sein. Sie sehen die 3 Tasten auf der rechten Seite des Produktbildes.

Ich weiß nicht, ob eine Lösung ein Array von einer Art hinzufügen könnte?

Answer 1

Eine Möglichkeit der Handhabung dieser jeder schenkt verknüpfen, um eine data- Eigenschaft, dass der Link beschreibt, wo sollte blättern. Sie können .data() verwenden, um auf diese Eigenschaften zuzugreifen.

$(".readMore").on('click', function() { 
 
    // Get the selector of where to scroll to 
 
    var selector = $(this).data('selector'); 
 
    $('html, body').animate({ 
 
    scrollTop: $(selector).offset().top - 200 
 
    }, 1000); 
 
});

html, body { 
 
    height: 100%; 
 
} 
 
div { 
 
    height: 100%; 
 
    margin-top: 20px; 
 
    border: solid 1px #000; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#" class="readMore desc" data-selector=".description">Produkt beskrivelse</a> 
 
<a href="#" class="readMore spec" data-selector=".specs">Produkt specs</a> 
 
<a href="#" class="readMore facebook" data-selector=".comments">Kommentarer</a> 
 

 
<div class="specs"> 
 
    Specs 
 
</div> 
 
<div class="description"> 
 
    Description 
 
</div> 
 
<div class="comments"> 
 
    Comments 
 
</div>

Answer 2

Wahrscheinlich besser Sie gerade lesen Sie die Klasse auf dem Objekt, teilen Sie es, um den gewünschten Wert zu erhalten. Als solche:

$('.readMore').on('click', function() { 
    var classes = $(this).attr('class'); 
    var cursor = class.split(' ')[1]; 

    if(cursor == 'facebook') { 
     ... 
    }else if(cursor == 'desc') { 
     ... 
    } else if(cursor == 'spec') { 
     ... 
    } 
}); 

Answer 3

eine Hilfsfunktion Verwenden Sie anstelle von kopier Einfügen Code

function foo(target, element) { 
    target.on('click', function() { 
     $('html, body').animate({ 
      scrollTop: element.offset().top - 200 
     }, 1000); 
    }); 
} 

foo($(".facebook"), $(".comments")); 
foo($(".readMore.desc"), $(".description")); 
foo($(".readMore.spec"), $(".specs")); 

Answer 4

Gemeinsame Klassen (die Sie haben) und Datenattribute finden Sie hier speichern.

<a href="#" class="readMore desc" data-dest=".comments">Produkt beskrivelse</a> 
<a href="#" class="readMore spec" data-dest=".specs">Produkt specs</a> 
<a href="#" class="readMore facebook" data-dest=".description"></i>Kommentarer</a> 

Und nun, ein Handler sie zu herrschen alle:

$(".readMore").on('click', function() { 
    var dest = $(this).data("dest"); 

    $('html, body').animate({ 
     scrollTop: $(dest).offset().top - 200 
    }, 1000); 
}); 

Answer 5

//extraced the common parts 
function scrollToTop (elementSelector) { 
    $('html, body').animate({ 
     scrollTop: $(elementSelector).offset().top - 200 
    }, 1000); 
} 

$(".facebook").on('click', function() { 
    scrollToTop('.comments'); 
}); 

$(".readMore.desc").on('click', function() { 
    scrollToTop('.description'); 
}); 

$(".readMore.spec").on('click', function() { 
    scrollToTop('.specs'); 
}); 

Answer 6

Zuerst werden Sie eine Karte brauchen die dom wird bewirken, welche. Sie hätten dies lösen können, indem Sie eine Art Klassennamenskonvention verwenden. Ich nehme an, Sie können sich nicht für die Klassennamen entscheiden. Also lassen Sie erstellen die Karte/Objekt/hash

var map = { 
    spec: "specs", 
    desc: "description", 
    facebook: "comments, 
} 

Nun wollen wir nur die Karte iterieren und fügen Sie die Funktionalität

Object.keys(map).forEach(function(key) { 
    var value = map[key]; 
    $(".readMore." + key).on('click', function() { 
    $('html, body').animate({ 
     scrollTop: $("." + value).offset().top - 200 
    }, 1000); 
    }); 
}) 

Und jetzt sind Sie ein glücklicher Coder.

Answer 7

Wenn Sie Schließungen gelernt haben, ziehe ich die wiederverwendbaren Ereignisse besser lesbar ...

Ich habe einen jsFiddle for this here

// use a closure to make your event's callback, 
// with the target as a parameter 
function makeClickFn(target) { 
    return function() { 
     $('html, body').animate({ 
      scrollTop: $(target).offset().top - 200 
     }, 1000); 
    }; 
} 

var clickFn; 

// facebook comments 
clickFn = makeClickFn('.comments'); 
$(".facebook").on('click', clickFn); 

// readmore description 
clickFn = makeClickFn('.description'); 
$(".readMore.desc").on('click', clickFn); 

// readmore specs 
clickFn = makeClickFn('.specs'); 
$(".readMore.spec").on('click', clickFn);