मेरे पास एक पृष्ठ पर पोस्ट के माध्यम से एक वर्डप्रेस क्वेरी लूपिंग है। प्रत्येक .ऑडियो-बॉक्स में 2 .play बटन होते हैं जिन्हें मुझे एक साथ काम करने की आवश्यकता होती है, जब एक क्लिक किया जाता है तो मैं चाहता हूं कि उस div में दूसरा भी ऐसा ही करे। समस्या यह है कि मेरे पास पृष्ठ पर एकाधिक ऑडियो-बॉक्स divs हैं। मुझे बस उस विशिष्ट .ऑडियो-बॉक्स div में 2 प्ले बटन की आवश्यकता है ताकि एक ही समय में काम किया जा सके अन्य सभी नहीं।
मेरे पास यह एचटीएमएल है:
<div class="audio-box">
<div class="audio-btn">
<img src="image/path.jpg" alt="play" />
</div>
<div class="audio-content">
<div class="date">Published 18/01/20</div>
<h2>title</h2>
<p>content</p>
</div>
<div style="clear:both;"></div>
<div class="audio-player play-wrap">
<audio id="player" class="music">
<source src="path/to/audio.mp3" type="audio/mpeg" />
</audio>
<div id="audio-player">
<div id="controls">
<i id="play" class="fa fa-play play"></i>
<div id="progressbar"></div>
<span id="time" class="time">00:00</span>
<i id="mute" class="fa fa-volume-up"></i>
<div id="volume"></div>
</div>
</div>
<i class="fa fa-play play"></i>
</div>
</div>
यह जावास्क्रिप्ट है जो मेरे पास है:
play_button.click(function() {
player[player.paused ? 'play' : 'pause']();
$('.play').toggleClass("fa-pause", !player.paused);
$('.play').toggleClass("fa-play", player.paused);
});
मुझे पता है कि समस्या इसलिए है क्योंकि मैं .play तत्व पर टॉगल क्लास कह रहा हूं लेकिन क्या उस विशिष्ट .ऑडियो-बॉक्स div के भीतर .play तत्व कहने का कोई तरीका है?
2 जवाब
निम्नलिखित क्लिक किए गए बटन से अगले पैरेंट .audio-box तक ऊपर की ओर दिखेगा और इसमें पाए जाने वाले .play तत्वों पर कार्रवाई को प्रकट करेगा:
play_button.click(function() {
player[player.paused ? 'play' : 'pause']();
$(this).closest('.audio-box')
.find('.play')
.toggleClass("fa-pause", !player.paused)
.toggleClass("fa-play", player.paused);
});
$(".audio-box").click(()=>{
$(".audio-box").children().css({"color": "red", "border": "2px solid red"});
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>