单击按钮时如何编写js函数以获取输入值

烦恼

我有几个class =“ items”，其中包括输入和按钮，我想单击按钮并确定输入的兄弟姐妹是否有价值。

function onClick(elem) {
  var $this = elem.tagName;
  var val = $this.siblings('input[type=text]').val();
  if (val == '') {
    console.log('no input');
  } else {
    console.log(val);
  }
}

<div class="items">
  <input type="" name="" id="keywordSearch1" placeholder="">
  <button onclick="onClick()">button1</button>
</div>
<div class="items">
  <input type="" name="" id="keywordSearch2" placeholder="">
  <button onclick="onClick()">button2</button>
</div>
<div class="items">
  <input type="" name="" id="keywordSearch3" placeholder="">
  <button onclick="onClick()">button3</button>
</div>

马门

将对象传递this给函数，并previousElementSibling从该元素获取先前的元素。

请注意： val()是jQuery方法，等效的JavaScript属性是value

function onClick($this) {
  var val = $this.previousElementSibling.value;
  if(val == ''){
      console.log('no input');
  }else{
     console.log(val);
  }
}

<div class="items">
    <input type="" name="" id="keywordSearch1" placeholder="">
    <button onclick="onClick(this)">Search 1</button>
</div>
<div class="items">
    <input type="" name="" id="keywordSearch2" placeholder="">
    <button onclick="onClick(this)">Search 3</button>
</div>
<div class="items">
    <input type="" name="" id="keywordSearch3" placeholder="">
    <button onclick="onClick(this)">Search 3</button>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。