jQuery '#' + dane ("target") wzór

Question

Widziałem to banda:

<a href="#" id="trigger" data-target="content">Click me</a> 
<div id="content">And something will happen here</div> 

z JS tak:

$("#trigger").click(function(){ 
    $("#" + $(this).data("target")).hide(); 
}) 

Wygląda to trochę dziwnie mi się robienie tego łączenia ciągów w celu utworzenia selektorów, które są następnie używane do uzyskania elementu docelowego. Czy istnieje lepszy wzór w JavaScript (z dostępnym jQuery) do ustawiania procedur obsługi jednego elementu, który musi wiedzieć o innym elemencie docelowym?

Answer 1

Dlaczego robisz ciąg konkatenacji prostu przechowywania identyfikatora z #

<a href="#" id="trigger" data-target="#content">Click me</a> 

$("#trigger").click(function(){ 
    $($(this).data("target")).hide(); 
}) 

Podobnie można przechowywać dowolne selektorów jak w data-target powiedzieć ex: - .tab1 etc, dzięki czemu nie trzeba ponownie wykonać ciąg konkatenacji wewnątrz kliknięcia lub dowolnego wydarzenia.

Answer 2

Dlaczego nie zrobić coś takiego, o wiele lepsze podejście moim zdaniem:

// Set the target 
$("#trigger").data('target', $('#content')); 

// Get the target 
$("#trigger").click(function(){ 
    $(this).data("target").hide(); 
}) 

Jeśli ustawienie go od zaplecza, bym to hash z wartością atrybutu jak inni sugerowali.

<a href="#" id="trigger" data-target="#content">Click me</a> 

$("#trigger").click(function(){ 
    var target = $(this).data("target"); 
    $(target).hide(); 
}) 

Answer 3

Zawsze masz możliwość zbudowania selektora, wygląda trochę ładniej niż konkatenacja ciągu wewnątrz selektora.

$("#trigger").click(function(){ 
    var selector = "#" + $(this).data("target"); 
    $(selector).hide(); 
}); 

Trochę ładniej, nie jestem pewien, czy tego właśnie szukasz.

Answer 4

Pominęłabym dane - całkowicie, umożliwiając tym samym pełną grację degradację.

<a href="#content" id="trigger" data-target="">Click me</a> 
<div id="content">And something will happen here</div> 

z

$("#trigger").click(function(e){ 
    e.preventDefault(); 
    $($(this).attr("href")).show(); 
    // note, i'm purposly not using this.href due to a bug in IE that would return the entire href rather than just the hash 
}) 

Answer 5

można po prostu użyć

$('#content').modal('toggle'); 

Obojętnie gdzie jesteś kod, aby rozpocząć pokaz modalne i ukryć, Można używać nawet "show"/"ukryj" funkcjonalność bezpośrednio.

Zakładam, że używasz Bootstrap i jednej z najnowszych wersji jQuery.

Ciesz się!

Answer 6

$ (this) .attr ("cel danych", "#myTarget");

to zadziałało dla mnie