如何更改父級 jQuery 輸入的值

Question

我在同一個div 中有兩個輸入，當我在另一個輸入中寫入時需要更改一個的值：注意：我需要使用this因為我有相同的 div 和相同的class和id 。

我的代碼：

 function customInput() { let customContent = event.target.value; let customInput = this.parents('.1'); $(customInput .a1 .b1).val(customContent); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="1"> <div class="a1"> <input type="text" class="b1" value=""> </div> <div class="a2"> <input type="text" class="b2" value="" onkeyup="customInput()"> </div> </div> <div class="1"> <div class="a1"> <input type="text" class="b1" value=""> </div> <div class="a2"> <input type="text" class="b2" value="" onkeyup="customInput()"> </div> </div>

Answer 1

要引用的函數當前元素，你可以通過this來的功能。

您可以嘗試使用.closest()和.find()

 function customInput(el) { $(el).closest('.1').find('.b1').val(el.value); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="1"> <div class="a1"> <input type="text" class="b1" value=""> </div> <div class="a2"> <input type="text" class="b2" value="" onkeyup="customInput(this)"> </div> </div> <div class="1"> <div class="a1"> <input type="text" class="b1" value=""> </div> <div class="a2"> <input type="text" class="b2" value="" onkeyup="customInput(this)"> </div> </div>

雖然我更喜歡使用.on()來附加事件（不使用內聯事件處理程序）以及輸入事件：

 $('.b2').on('input', function() { $(this).closest('.1').find('.b1').val(this.value); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="1"> <div class="a1"> <input type="text" class="b1" value=""> </div> <div class="a2"> <input type="text" class="b2" value=""> </div> </div> <div class="1"> <div class="a1"> <input type="text" class="b1" value=""> </div> <div class="a2"> <input type="text" class="b2" value=""> </div> </div>

Answer 2

您有點將純 javascript 與 jQuery 混合在一起。 盡管這很好用，但我認為為了可讀性，最好盡可能多地使用一個，所以我將您的所有代碼都更改為 jQuery。

我沒有使用內聯事件綁定，而是使用了 jQuery 事件綁定。 我建議避免內聯綁定，因為它更易於維護，並且您可以將多個處理程序綁定到一個事件或使用 jQuery off()方法切換它們。

還將keyup事件更改為input事件，因為這也適用於例如復制粘貼，如果您不想要，當然可以堅持使用 keyup 事件。

使用 jQuery closest()函數，您可以找到第一個匹配的父級。 使用 jQuery find()函數，您可以找到匹配的孩子。

如果您願意，您可以稍微美化您的代碼以使用 jQuery 鏈接。 所以我評論了一個班輪。

使用 find 函數，您可以在父級中查找元素。

 $('.b2').on('input', function() { let $this = $(this); let customContent = $this.val(); let $customInput = $this.closest('.1'); $($customInput).find('.a1 .b1').val(customContent); //One liner that does the same. //$(this).closest('.1').find('.b1').val($(this).val()); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="1"> <div class="a1"> <input type="text" class="b1" value=""> </div> <div class="a2"> <input type="text" class="b2" value=""> </div> </div> <div class="1"> <div class="a1"> <input type="text" class="b1" value=""> </div> <div class="a2"> <input type="text" class="b2" value=""> </div> </div>