2011-03-10 10 views
5

का उपयोग कर रेडियो बटन चयन में परिवर्तन का निरीक्षण करना मैं प्रोटोटाइप जेएस (v1.7) के लिए अपेक्षाकृत नया हूं, और मैं कुछ पर अटक गया हूं। मैं रेडियो बटन चयन में परिवर्तन कब होता है यह पता लगाने की कोशिश कर रहा हूं।प्रोटोटाइप जेएस

रेडियो बटन:

<input class="amounts" type="radio" name="amount" id="amount-1" value="1" /> 
<input class="amounts" type="radio" name="amount" id="amount-2" value="2" /> 
<input class="amounts" type="radio" name="amount" id="amount-3" value="3" /> 

जावास्क्रिप्ट: यहाँ एक चाकू मैं इसे पर ले लिया है, जो काम नहीं करता है:

Event.observe($$('amounts'), 'change', function(event) { 
    alert('change detected'); 
}); 

जब प्रपत्र लोड हो जाए, कोई रेडियो बटन कोड यह चेक किया गया है मैं इन घटनाओं का पता लगाने के जावास्क्रिप्ट चाहते हैं:
1) एक रेडियो बटन का चयन किया जाता है, जब कोई भी पहले से
2 का चयन किया गया) रेडियो बटन का चयन बदल जाता

किसी भी मदद की बहुत सराहना की जाएगी। धन्यवाद!

  • रोहन
+0

आपके पास काम करने वाले एक बार चेकमार्क पर क्लिक करके एक जवाब स्वीकार करना सुनिश्चित करें! –

उत्तर

12

कोशिश कर सकते हैं यह काम नहीं करता है एक तत्व की जरूरत है। $$('amounts') किसी भी तत्व से मेल नहीं खाता है, <amounts> टैग नहीं हैं।

एक बेहतर तरीका एक पूर्वजों तत्व का उपयोग करना है जो पहचानना आसान है।

<form id="amounts-form"> 
    <input class="amounts" type="radio" name="amount" id="amount-1" value="1" /> 
    <input class="amounts" type="radio" name="amount" id="amount-2" value="2" /> 
    <input class="amounts" type="radio" name="amount" id="amount-3" value="3" /> 
</form> 

अब काम करने के लिए एक अद्वितीय ID है हम साथ उपयोग कर सकते हैं Event.on

$('amounts-form').on('change', '.amounts', function(event) { 
    alert('change detected'); 
}); 

सूचना घटनाओं '.amounts' द्वारा फ़िल्टर किया जा रहा है, अवधि वर्ग के नाम का उपयोग करने के कहते हैं।
यदि आप फ़ायरफ़ॉक्स या क्रोम के डेवलपर टूल के लिए फ़ायरबग का उपयोग कर रहे हैं तो आप कंसोल में सीधे अपनी स्क्रिप्ट के कुछ हिस्सों का परीक्षण कर सकते हैं। यह वास्तव में यह जानने में मदद करता है कि कोई चयनकर्ता उन तत्वों से मेल खाता है जो आपको लगता है कि $$('.amounts')

0

इसकी अधिक कुशल सिर्फ उन चेक बॉक्स एक ही कक्षा देने के लिए, लेकिन क्योंकि $$ तत्वों और Event की एक सरणी देता है यू भी

$("id^=amounts-").change(function(){alert("blah blah")}) 
2

अल्टरगेरो का उत्तर इवेंट हैंडलर को सीधे "राशि" रेडियो तत्वों से जोड़ने के लिए एक इटरेटर का उपयोग करने का प्रयास करता है लेकिन यह काम नहीं करता है कुछ कारण:

  1. "$" फ़ंक्शन सीएसएस चयनकर्ताओं को पैरामीटर के रूप में नहीं लेता है, केवल आईडी। इसके बजाए "$$" का प्रयोग करें।
  2. सीएसएस "आईडी" विशेषता चयनकर्ता वर्ग स्क्वायर "[]" शामिल होना चाहिए। यह भी गलत वर्तनी है। उदाहरण में आईडी को मिलान करने के लिए "राशि-" "राशि" होनी चाहिए। या बस इसके बजाय एक वर्ग चयनकर्ता का उपयोग करें: "। माउंट्स"।
  3. कोई "परिवर्तन" विधि नहीं है जिसे गणनाओं पर बुलाया जा सकता है। इसके बजाय चालान या कुछ अन्य गणितीय विधि का प्रयोग करें।

यह एक काम करना चाहिए:

$$("[id^=amount-]").invoke(
    'on', 
    'change', 
    function(){alert("hello " + this.id)} 
) 

(का उपयोग कर YMMV "इस" ईवेंट हैंडलर में।मैंने केवल फ़ायरफ़ॉक्स में कोड की जांच की है)

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