jQuery ‘#’ + dati(“target”) modello

Ho visto un sacco:

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

Con JS come questo:

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

Sembra un po ‘ strano per me fare questa concatenazione di stringhe per creare i selettori che vengono poi utilizzati per ottenere l’elemento di destinazione. C’è un migliore modello in Javascript (jQuery) disponibile per impostazione gestori su un elemento che dovete sapere su un altro elemento di destinazione?

  • Si può sentire un po ‘ imbarazzante, ma non c’è niente di sbagliato in questo.
  • So che funziona, alla ricerca di qualche esperto argomenti sulle migliori pratiche da persone che hanno mantenuto il più grande JS progetti.
InformationsquelleAutor spike | 2013-05-07

 

6 Replies
  1. 27

    Perché fare la concatenazione della stringa basta memorizzare l’id con #

    <a href="#" id="trigger" data-target="#content">Click me</a>
    
    $("#trigger").click(function(){
      $($(this).data("target")).hide();
    })

    Allo stesso modo è possibile memorizzare tutti i selettori come è in data-target dire per es: – .tab1, ecc in modo che non è necessario eseguire la concatenazione di stringhe di nuovo all’interno di un clic o di qualsiasi evento.

    • Per curiosità: è il $() intorno $(this).data("target") davvero necessario?
    • Sì, this è un elemento del DOM e non ha un data funzione. data è una funzione di jquery, quindi è necessario utilizzare $ per creare un oggetto jquery.
    • Un altro vantaggio di questo approccio è che io non sono più limitati a id. Ogni selettore avrebbe funzionato.
    • Ah ok, grazie per la tua spiegazione!!!
  2. 4

    Si può semplicemente utilizzare

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

    In ogni dove, nel codice per avviare il modale mostrare e nascondere,
    Si può usare anche “show”/”nascondere” direttamente la funzionalità.

    Presumo che si sta utilizzando Bootstrap e una delle ultime versioni di jQuery.

    Godere !

    • questo non risponde alla mia domanda. La domanda non è come mostrare o nascondere le cose con JS, si tratta di modelli per l’incorporamento di dinamica di selezione obiettivi all’interno di HTML.
  3. 3

    Perché non fare qualcosa di simile a questo, un approccio ancora migliore a mio parere:

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

    Se stai impostando dal backend, vorrei includere l’hash con il valore dell’attributo come altri hanno suggerito.

    <a href="#" id="trigger" data-target="#content">Click me</a>
    
    $("#trigger").click(function(){
         var target = $(this).data("target"); 
         $(target).hide();
    })
    • Ogni volta che ho visto questo fatto, i dati di attributo è utilizzato perché è stabilito dal backend.
    • Fiera abbastanza, che è un buon punto.
    • Giusto, mi piacerebbe che la JS essere generici, in modo che io possa specificare gli obiettivi in mio markup e tutto scorre. Credo che la domanda è in realtà come si può andare da stringhe in HTML per gli oggetti in javascript. Impostazione dei dati di destinazione per l’effettivo oggetto jquery è l’ideale, ma come fare in modo generico?
  4. 1

    Hai sempre la possibilità di costruire il selettore, sembra un po ‘ più bello di concatenando la stringa all’interno del selettore.

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

    Un po ‘ più bello, non so se è quello che stai cercando.

    • Sì, questo potrebbe essere più leggibile a seconda del contesto.
  5. 0

    Vorrei saltare dati completamente, permettendo graceful degradation.

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

    con

    $("#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
    })

Lascia un commento