javascript - 如何获取按钮单击事件的输入的当前值

Question

我有一堆具有相同功能的 div，我正在尝试为它们编写一个函数。

基本上，它们有一个预定值和一个用户输入值，并且这些值需要相乘。

我浏览了很多其他问题并 this是我能找到的最接近的一个。几乎完全正确，但这些答案都不起作用。

任何帮助都会很棒。提前致谢!

<div>
   <label>enter value for multiple here</label>
   <input type="text" class="multiple" factor="foo1"/>
   <button type="button" class="multiplyBtn">Click here to multiply these numbers</button>

   <label>enter value for multiple here</label>
   <input type="text" class="multiple" factor="foo2"/>
   <button type="button" class="multiplyBtn">Click here to multiply these numbers</button>
</div>

这是 JS:

$('.mulitplyBtn').click(function() {
   var factor = $(this).closest('attr.factor').val();
   var multiple = $(this)closest('.multiple').val();
   answer = (factor * multiple);
};

Answer 1

这会起作用:

$('.multiplyBtn').click(function() { // you had multiplyBtn spelled wrong here
  var cur = $('.multiplyBtn').index($(this)); // get index of clicked btn
  var factor = $('.multiple').eq(cur).data('factor'); // get factor from matching input
  var multiple = $('.multiple').eq(cur).val(); // get value from matching input
  answer = (Number(factor) * Number(multiple)); // make sure both are numbers then multiply
  alert(answer);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <label>enter value for multiple here</label>
  <input type="text" class="multiple" data-factor="4" />
  <button type="button" class="multiplyBtn">Click here to multiply these numbers</button>
  <br>

  <label>enter value for multiple here</label>
  <input type="text" class="multiple" data-factor="7" />
  <button type="button" class="multiplyBtn">Click here to multiply these numbers</button>
</div>