как получить текущие значения ввода при событии нажатия кнопки

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>

Answer 2

В первой строке вы использовали "и" попробуйте использовать одни и те же цитаты (я имею в виду, используя" .multiplyBtn» или '.multiplyBtn')

Второй раз, 3-я строка, вы не использовали какую-либо цитату при вызове .multiple.Так что включите ее в этом формате: var multiple = $ (this) closeest ('. 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.)
• $ (это) ближе всего должно быть $ (это) .closest

Неправильная функция:

ближайших() ищет родитель, и единственным родителем здесь является DIV, не класса. То, что вы, вероятно, хотите, чтобы использовать родительский(), чтобы перейти к DIV, а затем найти() для поиска детей родителя для конкретного элемента:

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