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

Question

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

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

我研究了其他问题， 这是我能找到的最接近的问题。 几乎完全正确，但这些答案均无效。

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

<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> 

Answer 2

在第一行中，您使用了“和”，并尝试使用相同的引号（我的意思是使用“ .multiplyBtn”或“ .multiplyBtn”）

第二次，第三行，您在调用.multiple时不使用任何引号。 所以以这种格式打开它：var multiple = $（this）closest（'。multiple'）。val（）

让我知道结果

Answer 3

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 4

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

错别字：

• $（'。mulitplyBtn'）应该是$（'。mulitplyBtn'）
• $（this）closest应该是$（this）.closest

功能错误：

close（）搜索父级，并且这里唯一的父级是没有类的DIV。 您可能想要的是使用parent（）上至DIV，然后使用find（）在父级的子级中搜索特定元素：

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