jQuery对多个元素的功能

Question

正如您在下面的代码段中所看到的，每个容器有两个按钮和一个输入。现在，输入计算并求和 相同容器中两个按钮的点击次数。但是，它仅适用于第一个容器。如何在每个输入组中分别 为每个容器工作而又不设置ID ？

    SELECT *
    FROM LocationOutsw W
    WHERE (@p_type = 'ALL' and W.NAME LIKE '%'+ @p_search + '%' OR W.DESCRIPTION LIKE '%'+ @p_search + '%')
        or (@p_type = 'NAME' and W.NAME LIKE '%'+ @p_search + '%') 
        or (@p_type = 'DESCRIPTION' and W.DESCRIPTION LIKE '%'+ @p_search + '%')

$(function() {
	$('.click').on('click', function() {
		$(this).val(parseInt($(this).val()) + 1);
	});
	$('.click').click(function() {
		var val1 = +$('.val1').val();
		var val2 = +$('.val2').val();
		$('.count').val(val1+val2);
	});
});

.cont {
  border: 1px solid red;
  padding: 10px;
  margin-bottom: 5px;
}

h1 {
  margin: 0;
}

Answer 1

首先获取被单击元素的父元素，然后仅在该父元素中搜索.valx元素。

$('.click').click(function (e) {
    var $parent = $(e.currentTarget).parent();

    var val1 = +$parent.find('.val1').val();
    var val2 = +$parent.find('.val2').val();
    $parent.find('.count').val(val1 + val2);
});

这样，您可以根据需要拥有任意数量的计数器。

---

更新：

您还可以在同一点击事件中添加+1功能。像这样：

$('.click').click(function (e) {
    var $input = $(e.currentTarget);
    var $parent = $input.parent();

    // Value ++
    $input.val($input.val() + 1);

    // Set the total count
    var val1 = +$parent.find('.val1').val();
    var val2 = +$parent.find('.val2').val();
    $parent.find('.count').val(val1 + val2);
});

Answer 2

让它为您工作！
使用$(this).parent().find();

$(function() {
	$('.click').on('click', function() {
		$(this).val(parseInt($(this).val()) + 1);
	});
	$('.click').click(function() {
		var val1 = + $(this).parent().find('.val1').val();
		var val2 = + $(this).parent().find('.val2').val();
		$(this).parent().find('.count').val(val1+val2);
	});
});

.cont {
  border: 1px solid red;
  padding: 10px;
  margin-bottom: 5px;
}

h1 {
  margin: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h1>First</h1>
<div class="cont">
  <input type="text" class="count" value="0">
  <input type="button" class="click val1" value="0">
  <input type="button" class="click val2" value="0">
</div>

<h1>Second</h1>
<div class="cont">
  <input type="text" class="count" value="0">
  <input type="button" class="click val1" value="0">
  <input type="button" class="click val2" value="0">
</div>

Answer 3

这是为您提供的解决方案：

$(function() {
	$('.click').on('click', function() {
		$(this).val(parseInt($(this).val()) + 1);
	});
	$('.val1').click(function() {
		var val1 = +$(this).val();
		var val2 = +$($(this).siblings('.val2')).val();
		$($(this).siblings('.count')).val(val1+val2);
	});
  	$('.val2').click(function() {
		var val1 = +$($(this).siblings('.val1')).val();
		var val2 = +$(this).val();
		$($(this).siblings('.count')).val(val1+val2);
	});
});

.cont {
  border: 1px solid red;
  padding: 10px;
  margin-bottom: 5px;
}

h1 {
  margin: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h1>First</h1>
<div class="cont">
  <input type="text" class="count" value="0">
  <input type="button" class="click val1" value="0">
  <input type="button" class="click val2" value="0">
</div>

<h1>Second</h1>
<div class="cont">
  <input type="text" class="count" value="0">
  <input type="button" class="click val1" value="0">
  <input type="button" class="click val2" value="0">
</div>