javascript 如何在jQuery中设置下一个元素的值

yhuiod9q  于 2023-05-27  发布在  Java
关注(0)|答案(4)|浏览(187)

我有一个按钮,在点击事件上,我需要设置下一个输入隐藏类型元素的值。我正在尝试下面的代码-

<span id="clear_promotion_brand_search" class="myButtonClass"><i class="fa fa-times"></i></span>
<span id="error_brand" class="show-error-msg"></span>
<input type="hidden" name="promotion_brand_id" value="" data-id="brand" class="search-id is-validate form-fields-value">

$(document).on('click','.myButtonClass',function(e){
  console.log($(this).closest(".search-id").length); // returning 0
  console.log($(this).next(".search-id").val()); // returning undefined
  if($(this).next(".search-id").length){
    var myval = $(this).next(".search-id").find('input[type=hidden]').val();
    console.log('Val -'+myval);
  }
});

我做错了什么?

von4xj4u

von4xj4u1#

您可以使用nextUntilnext来获取所需的输入值,如下面的代码所示

$(function(){
  $(document).on('click','.myButtonClass',function(e){
    var input = $(this).nextUntil(".search-id").next();
    console.log(input.length);
    console.log("value = " + $(input).val());
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="clear_promotion_brand_search" class="myButtonClass">Button<i class="fa fa-times"></i></span>
<span id="error_brand" class="show-error-msg">Error</span>
<input type="hidden" name="promotion_brand_id" value="Test Value" data-id="brand" class="search-id is-validate form-fields-value">

或者,您可以将nextAll:first选择器一起使用

$(function(){
      $(document).on('click','.myButtonClass',function(e){
        var input = $(this).nextAll(".search-id:first");
        console.log(input.length);
        console.log("value = " + $(input).val());
      });
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <span id="clear_promotion_brand_search" class="myButtonClass">Button<i class="fa fa-times"></i></span>
    <span id="error_brand" class="show-error-msg">Error</span>
    <input type="hidden" name="promotion_brand_id" value="Test Value" data-id="brand" class="search-id is-validate form-fields-value">
epfja78i

epfja78i2#

您的.next()元素实际上是HTML代码中的下一个元素,因此在本例中它是<span id="error_brand" class="show-error-msg"></span>
我修改了你的代码。.find()也排除当前元素。所以如果你在你想找的元素上运行这个,它不会找到它。
我更新了你的片段一点,只是添加了一个真实的的按钮和一些内容。除此之外都一样。

$(document).on('click','.myButtonClass',function(e){
  e.preventDefault();
  if($(this).next().next().length){
    var myval = $(this).next().next().val();
    console.log('Val -'+myval);
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="clear_promotion_brand_search" class="myButtonClass">Click me!<i class="fa fa-times"></i></button>
<span id="error_brand" class="show-error-msg"></span>
<input type="hidden" name="promotion_brand_id" value="testvalue" data-id="brand" class="search-id is-validate form-fields-value">
vmpqdwk3

vmpqdwk33#

使用siblings()代替next()
在工作代码下面运行-

$(document).on('click','.myButtonClass',function(e){
  console.log($(this).closest(".search-id").length); // returning 0
  console.log($(this).siblings("input:hidden.search-id").val()); // returning undefined
  if($(this).siblings("input:hidden.search-id").length){
    var myval = $(this).siblings("input:hidden.search-id").val();
    console.log('Val -'+myval);
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="clear_promotion_brand_search" class="myButtonClass">Click Here<i class="fa fa-times"></i></span>
<span id="error_brand" class="show-error-msg"></span>
<input type="hidden" name="promotion_brand_id" value="Hidden Input Value" data-id="brand" class="search-id is-validate form-fields-value">
hkmswyz6

hkmswyz64#

你可以使用$(this).next().next()函数来找到一个输入框。

$(document).ready(function(){
   $(".myButtonClass").on('click',function(){
      $(this).next().next().val('Hello World')
   })
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="clear_promotion_brand_search" class="myButtonClass"><i class="fa fa-times">click me</i></span>
<span id="error_brand" class="show-error-msg"></span>
<input type="hidden" name="promotion_brand_id" value="" data-id="brand" class="search-id is-validate form-fields-value">

相关问题