मैं नीचे के रूप में DIV संरचना है (pls की जाँच करें छवि)। जब मैं Jquery का उपयोग करके संबंधित बटन पर क्लिक करता हूं तो मैं टेक्स्ट बॉक्स की सामग्री को बदलना चाहता था।
उदाहरण के लिए, यदि मैं बटन (1) पर क्लिक करता हूं, तो टेक्स्टबॉक्स (1) की सामग्री बदलनी चाहिए। इसी तरह अगर मैं बटन (2) पर क्लिक करता हूं तो टेक्स्टबॉक्स की सामग्री (2) बदलनी चाहिए।
मैंने निम्नलिखित कोड लिखा है, लेकिन यह बटन (2) के लिए काम कर रहा है, जब मैं बटन (1) पर क्लिक करता हूं तो यह दोनों टेक्स्टबॉक्स की सामग्री को बदल देता है।
$(document).on("click", ".b", function(e) {
var a = $(this).closest(".a");
$(".c", a).val("sample text");
});
मैं अलग-अलग बटन / टेक्स्टबॉक्स के लिए अलग-अलग कक्षाएं रखकर इसे हल कर सकता हूं। लेकिन मैं चाहता था कि एक ही वर्ग संरचना हो और समस्या का समाधान हो।
उत्तर:
जवाब के लिए 0 № 1यदि आपकी DOM संरचना हमेशा आपकी छवि के समान है, तो यह काम करना चाहिए।
HTML:
<div class="a">
<input type="text" class="c">
<input type="button" value="Button" class="b">
<div class="a">
<input type="text" class="c">
<input type="button" value="Button" class="b">
</div>
</div>
jQuery:
$(".b").on("click", function () {
//Find parent .a
var $a = $(this).parent();
//Add in the text
$a.children(".c").val("sample text");
});
जवाब के लिए 0 № 2
यह उस तरह से काम करता है क्योंकि आप सबसे करीब आते हैं ".a" तत्व और फिर एक खोज करते हैं, जो प्रकृति में पुनरावर्ती है; यही कारण है कि यह दोनों टेक्स्ट बॉक्स का चयन करेगा।
इसके बजाय, बस भाई तत्व खोजें:
$(document).on("click", ".b", function(e) {
var $c = $(this).siblings(".c");
$c.val("sample text");
});