2009-05-19 15 views
5

पर मैं अपनी साइट पर कुछ jQuery कार्यक्षमता जोड़ना चाहता हूं, जहां मार्कअप के एक टुकड़े पर एक क्लिक हैंडलर होगा जिसके लिए मार्कअप के दूसरे टुकड़े पर कार्रवाई होनी चाहिए, यानी ए ट्रिगर है बी से कार्रवाई के लिए ए और बी की सापेक्ष संरचना के बारे में कोई गारंटी नहीं है, इसलिए मैं एक jQuery चयनकर्ता पर भरोसा नहीं कर सकता, साथ ही प्रत्येक अद्वितीय ए को केवल अपने अद्वितीय समकक्ष बी से संबंधित होना चाहिए।jQuery, मेटाडाटा, और एक्सएचटीएमएल अनुपालन

क्या है ऐसी परिस्थिति में आगे बढ़ने का सबसे अच्छा तरीका सामान्य आम सहमति?

विकल्प 1: कौन एक्सएचटीएमएल अनुपालन की परवाह करता है, वैसे भी यह अतिरंजित है। हमारे पास अनचाहे वेब सामग्री उत्पादक हमारी साइट पर मार्कअप इंजेक्ट करने में सक्षम हैं, इसलिए सख्त एक्सएचटीएमएल अनुपालन एक पाइप सपना होगा। बस टैग विशेषताएँ बनाएं और jQuery के साथ अपने मान पढ़ें।

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

विकल्प 2: उपयोग गुण है कि HTML की तरह लग रही है, लेकिन वास्तव में उस उद्देश्य के लिए नहीं किया जाना चाहिए।

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

विकल्प 3: ASP.NET 4.0 तरह नामस्थान उपयोग बाहर स्थापित करना।

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

आप विकल्प 3 सिफारिश करने के लिए चाहते हैं, तो मैं क्या के रूप में मैं वास्तव में पता नहीं है अगर एक DTD किए जाने के लिए है या में यह लिंक करने का तरीका यह काम करने के लिए प्राप्त करने के लिए आवश्यक है के लिए एक लिंक की सराहना करेंगे।

विकल्प 4: स्टैक ओवरफ़्लो समुदाय का एक बेहतर विचार है ... ???

उत्तर

8

आप jQuery Metadata plugin, जो class विशेषता (या अन्य विभिन्न स्थानों) में JSON मेटाडाटा स्टोर कर सकते हैं की जांच कर सकता है। उदाहरण:

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

यह मूल रूप से विकल्प 2 – kizzx2

1

वहाँ किसी भी तरह से है कि आप jQuery डेटा विधि के अंदर की जानकारी स्टोर कर सकते हैं है? मार्कअप

को अव्यवस्थित एक उदाहरण के लिए यहाँ देखें

snipplr.com/view/9715/the-jquery-data-store/

या प्रत्यक्ष प्रलेखन

docs.jquery बचाता है। कॉम/कोर/डेटा # नाम

मैंने अपने तत्वों के बारे में जानकारी संग्रहीत करने के लिए इसे दो बार उपयोग किया है, बहुत उपयोगी फ़ंक्शन जो व्यापक रूप से व्यापक रूप से नहीं जानता है!

क्षमा करें लिंक मैं एक नया उपयोगकर्ता :(

1

हूँ पोस्ट नहीं कर सकते इस प्रयास करें:

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

तो मैं लक्ष्य देने का फैसला किया है आईडी divs "लक्ष्य-x" और दे ट्रिगर आईडी "x"। इस तरह, जब आप ट्रिगर पर क्लिक करें यह प्रभावित करता है एक्स लक्ष्य "लक्ष्य-x" divs।

सूचना लाइन है कि चला जाता है

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

इसके कि मुद्दा यह है कि आप क्लिक किए गए div की आईडी प्राप्त करें और "target-" पर इसे जोड़ और उस लक्ष्य div की आईडी हो जाता है पर।

0

और के बारे में क्या उचित नाम और आईडी के साथ अपने div के अंदर छिपा आदानों डाल? इस तरह आप एक्सएचटीएमएल स्पष्ट रखते हैं। तो तुम उस तरह का उपयोग करेगा:

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

मैं बिल्कुल नहीं जानते कि तुम क्या कर रहे हैं, लेकिन यह संभव ट्रिगर एक लंगर टैग हो बनाने के लिए और उसके बाद लक्ष्य एक आईडी देना होगा? इस तरह:

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

फिर आप href विशेषता को देखकर लक्ष्य की आईडी खोजने के लिए jQuery का उपयोग कर सकते हैं।

ट्रिगर 1 खाल या शो को लक्षित करते हैं 1 या इसे करने के लिए नीचे स्क्रॉल, इस पद्धति अभी भी कुछ कर रही है, तो जावास्क्रिप्ट अक्षम किया गया था के अतिरिक्त लाभ होगा।

6

मैं, अब इस बात के लिए data- attributes का प्रयोग करेंगे इस तरह एक्सएचटीएमएल अनुपालन के बावजूद,:

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

ये एक HTML5 विशेषता है, लेकिन HTML4/XHTML में किसी भी मुद्दे मान्य नहीं किया जा रहा है के अलावा अन्य कारण नहीं है सत्यापनकर्ता में जिम्मेदार बताते हैं ... लेकिन कोई वास्तविक समस्याओं इस से परिणाम।

jQuery भी .data() तरीकों में has added built-in support for these since jQuery 1.4.3

+0

जॉन रेसिग द्वारा [HTML 5 डेटा- विशेषताएँ] (http://ejohn.org/blog/html-5-data-attributes/) भी देखें –

संबंधित मुद्दे