html - Toggleclass on several div ids/classes in Jquery + Jquery-Mobile -

प्रिय देवियो और सज्जनो,

मेरे पास जेक्जरी लाइब्रेरी के टॉगलक्लास फ़ंक्शन के प्रति एक प्रश्न है। मैं वर्तमान में सूचियों और सामग्री लेखों के साथ एक jquery-mobile ऐप पर काम कर रहा हूं। इस आलेख के भीतर मैं "रात का यंत्र" को लागू करना चाहता हूं रात्रि का बटन बटन प्रत्येक लेख को छूने के बाद, एक ही कक्षा के साथ लेकिन एक !! अलग आईडी !!

मैं आपको अपने लेख HTML संरचना, मेरी सीएसएस और इसके लिए jquery स्क्रिप्ट दिखाऊंगा।

तो यह मेरा कोड-संरचना है:

  $ (document) .ready (function () {$ ('# nightmode_article1')। क्लिक करें (फ़ंक्शन () {$ ('# article1')। Toggleclass ('night');}); $ ('# नाईटमोड_टार्क 2')। क्लिक करें (फ़ंक्शन () {$ ('# article2')। ToggleClass ('रात');});});  

  .day {background-image: url (images / background.jpg); पृष्ठभूमि दोहराने: दोहराने; पाठ संरेखित करें: केंद्र; }। रात {पृष्ठभूमि-छवि: यूआरएल (चित्र / पृष्ठभूमि-रात.जेपीजी); पृष्ठभूमि दोहराने: दोहराने; पाठ संरेखित करें: केंद्र; रंग: # F0F0F0; पाठ-छाया: कोई नहीं; }  

  & lt; div डेटा-भूमिका = "पृष्ठ" id = "article1" class = "day" & gt; & Lt; हैडर डेटा-भूमिका = "हैडर" & gt; & Lt; button id = "nightmode_article1" & gt; & lt; img src = "images / night-icon.png" / & gt; & lt; / बटन & gt; & Lt; h1 & gt; Article1 & lt; / h1 & gt; & Lt; / हैडर & gt; & Lt; लेख डेटा-भूमिका = "सामग्री" & gt; & Lt; / लेख & gt; & Lt; पादलेख डेटा-भूमिका = "पादलेख" डेटा-स्थिति = "निश्चित" & gt; & Lt; नेविगेशन डेटा-भूमिका = "नेवाबार" & gt; & LT; ul & gt; & Lt; li & gt; & lt; a href = "#" डेटा-आइकन = "होम" & gt; होम & lt; / a & gt; & lt; / li & gt; & Lt; li & gt; & lt; a href = "#" डेटा-आइकन = "बैक" & gt; टेस्ट & lt; / a & gt; & lt; / li & gt; & Lt; / ul & gt; & Lt; / नव & gt; & Lt; / पाद लेख & gt; & Lt; / div & gt; & Lt; div डेटा-भूमिका = "पृष्ठ" आईडी = "आलेख 2" वर्ग = "दिन" & gt; & Lt; हैडर डेटा-भूमिका = "हैडर" & gt; & Lt; button id = "nightmode_article2" & gt; & lt; img src = "images / night-icon.png" / & gt; & lt; / बटन & gt; & Lt; h1 & gt; Article1 & lt; / h1 & gt; & Lt; / हैडर & gt; & Lt; लेख डेटा-भूमिका = "सामग्री" & gt; & Lt; / लेख & gt; & Lt; पादलेख डेटा-भूमिका = "पादलेख" डेटा-स्थिति = "निश्चित" & gt; & Lt; नेविगेशन डेटा-भूमिका = "नेवाबार" & gt; & LT; ul & gt; & Lt; li & gt; & lt; a href = "#" डेटा-आइकन = "होम" & gt; होम & lt; / a & gt; & lt; / li & gt; & Lt; li & gt; & lt; a href = "#" डेटा-आइकन = "बैक" & gt; टेस्ट & lt; / a & gt; & lt; / li & gt; & Lt; / ul & gt; & Lt; / नव & gt; & Lt; / पाद लेख & gt; & Lt; / div & gt;  

क्या हर लेख के लिए अलग-अलग बटन नहीं बनाने की कोई संभावना है?

क्या यह संभव है?

सबसे अच्छा संबंध है और कई लोग एक आईडी के साथ एक बटन को छूने / धकेलने से मैं हर लेख (और फिर एक लेख आईडी) में वर्ग को टॉगल करना चाहता हूं। बहुत धन्यवाद!

रात मोड बटन पर एक आईडी के बजाय, उन सभी को एक ही असाइन करें वर्ग, उदाहरण:

  & lt; बटन वर्ग = "रात मोडबटन" & gt; & lt; img src = "चित्र / रात-आइकन.png" / & gt; & lt; / बटन & gt;  

उस वर्ग के लिए एक क्लिक हैंडलर को जोड़ें ताकि किसी भी रात मोड बटन पर क्लिक करके एक ही कोड चलाया जा सके:

  $ ('.nightModeButton')। क्लिक करें (फ़ंक्शन () {$ ('[data-role = "page"]')। ToggleClass ('night');});  

हेन्डलर में, $ ('[data-role = "page"]') का इस्तेमाल करके सभी लेखों पर रात वर्ग को टॉगल करें चयनकर्ता। अपने सभी लेखों को माना जा रहा है कि आपके उदाहरण कोड में पृष्ठ हैं, वे सभी अपडेट हो जाएंगे।

यदि आप गतिशील रूप से लेखों को इंजेक्शन, आपको वर्तमान मोड को सहेजने और आने वाले पेज के लिए क्लास सेट करने की आवश्यकता होगी।