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

Question

I have a bunch of div's that have the same functionality and I'm trying to write a function for them.

Basically they have a predetermined value and a user input value and those need to be multiplied.

I've looked through a bunch of other questions and this is the closest one I could find. Almost exactly, but none of those answers work.

Any help would be great. Thanks in advance!

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

Here's the JS:

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

Answer 1

This would work:

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

In the first line you used " and ' try using the same quotes (I mean using ".multiplyBtn" or '.multiplyBtn' )

Second time, 3rd line you didn't use any quote when calling .multiple. So turn it in that format : var multiple = $(this)closest('.multiple').val()

let me know the result

Answer 3

attr.factor does not work like this.

try it like this:

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

You have at least two typos and are using the wrong jQuery function.

Typos:

• $('.mulitplyBtn') should be $('.mulitplyBtn')
• $(this)closest should be $(this).closest

Wrong function:

closest() searches the parents, and the only parent here is the DIV with no class. What you probably want is to use parent() to go up to the DIV, then find() to search the parent's children for a specific element:

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