2009-05-19 2 views
5

Desidero aggiungere alcune funzionalità jQuery ai nostri siti in cui un pezzo di markup avrà un gestore di clic che dovrà provocare l'azione su un altro pezzo di markup, cioè A è un trigger per l'azione di B. Non c'è alcuna garanzia sulla struttura relativa di A e B, quindi non posso fare affidamento su un selettore jQuery, più ogni A unico dovrà riguardare solo la sua controparte unica B.su jQuery, metadati e conformità XHTML

Qual è il consenso generale sul modo migliore di procedere in tale circostanza?

Opzione 1: Chi si preoccupa della conformità XHTML, è sopravvalutato comunque. Abbiamo produttori di contenuti Web non addestrati in grado di inserire il markup nel nostro sito, quindi la rigida conformità XHTML sarebbe un vero sogno. Basta creare gli attributi dei tag e leggere i loro valori con jQuery.

Example: 
<div class="jquery-feature-trigger" actson="targetID">Trigger</div> 

Opzione 2: Utilizzare gli attributi che assomigliano a HTML, ma non dovrebbe in realtà essere utilizzati a tale scopo.

Example: 
<div class="jquery-feature-trigger" rel="targetID">Trigger</div> 

Opzione 3: utilizzare gli spazi dei nomi come ASP.NET 4.0 è l'impostazione di fare.

Example: 
<div class="jquery-feature-trigger" custom:actson="targetID">Trigger</div> 

Se si desidera consigliare l'opzione 3, gradirei un link a ciò che è necessario per ottenere questo a lavorare come ho davvero non ho idea se un DTD deve essere inviato o il modo di collegare in.

Opzione 4: La comunità Stack Overflow ha un'idea migliore ... ???

risposta

8

Si potrebbe indagare la jQuery Metadata plugin, che può immagazzinare JSON metadati nell'attributo class (o diversi altri luoghi). Esempio:

<div class="jquery-feature-trigger { actson: 'targetID' }">Trigger</div> 
+0

Questa è in pratica l'opzione 2 – kizzx2

1

Esiste un modo per memorizzare le informazioni nel metodo dati jQuery? Salva ingombrano il markup

Per un esempio vedi qui

snipplr.com/view/9715/the-jquery-data-store/~~V~~3rd

o la documentazione diretta

docs.jquery. com/Core/data nome nome

L'ho usato un paio di volte per memorizzare informazioni sui miei elementi, funzione molto utile che non sembra essere ampiamente conosciuta!

scusate non postare link Sono un nuovo utente :(

1

Prova questo:

<html> 
<head> 


    <script src="scripts/jquery/jquery-1.2.6.min.js" type="text/javascript"></script> 
    <!--Using highlight effect to illustrate-->  
    <script src="scripts/jquery/jquery-ui-highlight.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
    $(document).ready(function(){ 
     $(".jquery-feature-trigger").click(function(){ 
      $("#target-" + $(this).attr("id")).effect("highlight", {}, 6000); 

     }); 
}); 
</script> 

</head> 

<body> 

<div class="jquery-feature-trigger" id="1">Trigger 1</div> 
<div class="jquery-feature-trigger" id="2">Trigger 2</div> 
<div class="jquery-feature-trigger" id="3">Trigger 3</div> 
<div class="jquery-feature-target" id="target-1">Target 1</div> 
<div class="jquery-feature-target" id="target-2">Target 2</div> 
<div class="jquery-feature-target" id="target-3">Target 3</div> 

</body> 
</html> 

Così ho deciso di dare il bersaglio div id il "target-x" e dare il grilletto div id la "x". in questo modo, quando si fa clic su grilletto x colpisce bersaglio "target-x".

avviso la linea che va

$("#target-" + $(this).attr("id")) 

è a quel punto che si ottiene l'id del div cliccato e lo si concatena su "target-" e che diventa l'id del div di destinazione.

0

E che dire mettere dentro i vostri input nascosti div con nomi e id appropriati? In questo modo si mantiene chiaro XHTML. Quindi si utilizzerà così:

$("div_name").find("hidden_input_name").val() 
0

Non so esattamente quello che stai facendo, ma sarebbe possibile fare il grilletto sia un tag di ancoraggio e poi dare il bersaglio un id? In questo modo:

<a href="#target1">Trigger 1</a> 
<div id="target1">Target 1</div> 

Quindi è possibile utilizzare jQuery per trovare l'ID del target guardando l'attributo href.

Se il trigger 1 nasconde o mostra l'obiettivo 1 o scorre verso il basso, questo metodo avrebbe il vantaggio aggiuntivo di fare ancora qualcosa se JavaScript era disabilitato.

6

userei data- attributes per questo ora, a dispetto di conformità XHTML, in questo modo:

<div class="jquery-feature-trigger" data-actson="targetID">Trigger</div> 

Questi sono una caratteristica di HTML5, ma non causano problemi in HTML4/XHTML diversi da non essere valida attributi nel validatore ... ma da questo non risultano problemi reali.

jQuery anche has added built-in support for these since jQuery 1.4.3 nei metodi .data().

+0

Vedere anche [HTML 5 dati- Attributi] (http://ejohn.org/blog/html-5-data-attributes/) di John Resig –