जब एक बटन क्लिक किया जाता है तो मैं एक div को छिपाना चाहता हूं और फिर उसी कक्षा के साथ अगला div दिखाना चाहता हूं। मैंने इस कोड का उपयोग करने की कोशिश की है, लेकिन जब मैं ऐसा करता हूं, तो अगला डिव जो मैं दिखाना चाहता हूं वह भी फीका पड़ जाता है।
$('.arrow:last-of-type').on('click', function(){
$( ".collaboration" ).each(function( index ) {
if($('.collaboration').css('display') == 'block'){
$(this).fadeOut()
$(this).next().fadeIn()
}
})
})
क्या प्रत्येक() को एक बार निष्पादित होने पर चलने से रोकने का कोई तरीका है और फिर क्लिक क्रिया होने पर फिर से चलाएं?
यहां एचटीएमएल है:
<div id="collaborations">
<p class="arrow"><</p>
<div class="collaboration">
<img src="./img/test.png" />
<p>Text</p>
<a href="#" target="_blank"><button>Visit</button></a>
</div>
<div class="collaboration">
<img src="./img/test.png" />
<p>Text</p>
<a href="#" target="_blank"><button>Visit</button></a>
</div>
<div class="collaboration">
<img src="./img/test.png" />
<p>Text</p>
<a href="#" target="_blank"><button>Visit</button></a>
</div>
<p class="arrow">></p>
</div>
</div>
धन्यवाद
2 जवाब
समाधान
आप इसे .collaborations के माध्यम से बिल्कुल भी पुनरावृति न करके इसे हल कर सकते हैं।
मुख्य बात यह है कि आपको इस बात पर नज़र रखने की ज़रूरत है कि वर्तमान में कौन सा दिखाया जा रहा है। यदि आप यह जानते हैं, तो आपका क्लिक हैंडलर क्या कर सकता है, अगला वाला दिखाएं और वर्तमान को छिपाएं।
मैं इसे .active वर्ग के साथ .collaboration के समान div पर करने का सुझाव दूंगा। फिर आप $('.active').next().addClass('.active') द्वारा अगले div का चयन कर सकते हैं, और $('.active').removeClass('.active') द्वारा अचयनित कर सकते हैं।
अगले एक का चयन करने से पहले आपको अपने पहले तत्व का संदर्भ संग्रहीत करने की आवश्यकता हो सकती है
उदाहरण
यह कैसे काम कर सकता है इसका एक त्वरित उदाहरण यहां दिया गया है: https://codepen.io/juancaicedo/pen/LYGgPWa< /ए>
मैं सभी सहयोगों को एक div में समूहित करने के लिए html के चारों ओर चला गया।
अन्य दृष्टिकोण
आप पाएंगे कि आपको उपरोक्त समाधान के साथ कुछ अन्य व्यवहारों के बारे में सोचना होगा। उदाहरण के लिए, मेरे उदाहरण में, एक क्षण है जब दो आइटम स्क्रीन पर होते हैं, जिससे उनका कंटेनर डिव बढ़ता है और बाद में सिकुड़ जाता है।
इन कारणों से, मुझे जावास्क्रिप्ट के भीतर से प्रस्तुति को संभालना पसंद नहीं है (यानी jQuery के fadeIn/fadeOut का उपयोग करना)।
यदि आप केवल सीएसएस का उपयोग करने के बजाय कोई रास्ता ढूंढ सकते हैं, तो मुझे लगता है कि यह बेहतर है। यहाँ css ट्रांज़िशन का उपयोग करके एक उदाहरण दिया गया है https://codepen.io/juancaicedo/pen/ZEQqzrR
कॉलबैक के अंदर झूठी वापसी करके each jQuery की विधि को जब भी आप चाहें रोका जा सकता है, तो आप शायद ऐसा करके अपना कोड ठीक कर सकते हैं:
$('.arrow:last-of-type').on('click', function(){
$( ".collaboration" ).each(function( index ) {
if($('.collaboration').css('display') == 'block'){
$(this).fadeOut()
$(this).next().fadeIn()
return false;
}
});
});