नीचे दिए गए कोड में मेरे पास प्रत्येक के तहत सामग्री के साथ 3 बटन हैं। जब मैं एक बटन पर क्लिक करता हूं तो यह सभी बटनों की सामग्री दिखाता है। मैं केवल क्लिक किए गए बटन की सामग्री दिखाना चाहता हूं।

$(".item").click(function() {
  $(".d-text").show();
});
.d-text {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="item item1">button</button>
<p class="d-text">Dummy text</p>

<button class="item item2">button</button>
<p class="d-text">Dummy text</p>

<button class="item item3">button</button>
<p class="d-text">Dummy text</p>
0
Moia 25 सितंबर 2019, 12:12

2 जवाब

आपको .next() का उपयोग करना होगा

$(this).next(".d-text").show();

यह आपके द्वारा क्लिक किए गए बटन के बाद केवल अगला p दिखाएगा।

डेमो

$(".item").click(function() {
  $(this).next(".d-text").show();
});
.d-text {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="item item1">button</button>
<p class="d-text">Dummy text</p>

<button class="item item2">button</button>
<p class="d-text">Dummy text</p>

<button class="item item3">button</button>
<p class="d-text">Dummy text</p>
3
Carsten Løvbo Andersen 25 सितंबर 2019, 12:15
.next(selector) का उपयोग करते हुए बस एक चेतावनी - यह वह नहीं करता जो इसे सहज रूप से जैसा दिखना चाहिए। ज्यादातर मामलों में आप केवल .next() (कोई चयनकर्ता नहीं) चाहते हैं। .next(selector), .nextAll().filter(select).first() के बजाय .next().filter(selector) के समान है
 – 
freedomn-m
25 सितंबर 2019, 12:28
वरीयता का मामला हो सकता है, हालांकि मैं HTML संरचना और प्रोग्राम लॉजिक्स के बीच युग्मन को कम करने की कोशिश करूंगा।
 – 
Eriks Klotins
25 सितंबर 2019, 12:35
सच है, आप हमेशा कुछ अनुकूलित कर सकते हैं, लेकिन इस मामले में, मेरा मानना ​​​​है कि इसे बहुत सरल रखना ताकि ओपी समझ सके और इससे सीख सके क्योंकि मुझे नहीं लगता (अगर मैं गलत हूं तो क्षमा करें) ओपी के पास jQuery का अधिक अनुभव है।
 – 
Carsten Løvbo Andersen
25 सितंबर 2019, 12:46

आपको प्रत्येक पी आइटम में एक विशिष्ट वर्ग/आईडी जोड़ने की आवश्यकता है ताकि आप सही टेक्स्ट के साथ एक विशिष्ट बटन को एक साथ जोड़ सकें

https://jsfiddle.net/zdyw8ra4/

एचटीएमएल:

<button class="item item1"data-target="#item1">button</button>
<p class="d-text"id="item1">Dummy text1</p>

<button class="item item2"data-target="#item2">button</button>
<p class="d-text" id="item2">Dummy text2</p>

<button class="item item3" data-target="#item3">button</button>
<p class="d-text"id="item3">Dummy text3</p>

जेएस:

$(".item").click(function() {
  $($(this).data('target')).toggle();
});
0
Eriks Klotins 25 सितंबर 2019, 12:20