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

Question

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

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

我查看了很多其他问题，this 是我能找到的最接近的问题。几乎完全正确，但是 none 这些答案有效。

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

<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" 或 '.multiplyBtn'）

第二次，第 3 行，您在调用 .multiple 时没有使用任何引号。所以把它变成那种格式：var multiple = $(this)closest('.multiple').val()

让我知道结果

Answer 2

attr.factor 不是这样的。

像这样尝试：

$('.multiplyBtn').click(function() {
    var container = $(this).prev('.multiple'); //don't forget the "dot"
    var multiple = container.val();
    var factor = container.attr('factor'); //since it is the same container. 
    var answer = (factor * multiple); //what exactly are you tryin to multiply?
};

Answer 3

您至少有两个错别字并且使用了错误的 jQuery 函数。

错别字：

$('.mulitplyBtn') 应该是 $('.mulitplyBtn')
$(this)closest 应该是 $(this).closest

函数错误：

closest() 搜索 parent，这里唯一的 parent 是没有 class 的 DIV。您可能想要的是使用 parent() 上升到 DIV，然后使用 find() 在 parent 的 children 中搜索特定元素：

$(this).parent().find('.multiple').val()

Answer 4

这可行：

$('.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>

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

how to get the current values of an input on button click event

javascript

jquery

closest

attr