Question

我有许多类似的div包含相同的结构，其中包含button，如下所示：

<div>
    <button>Select Equipment</button>
    <span>0</span>
</div>
<div>
    <button>Select Equipment</button>
    <span>0</span>
</div>
<div>
    <button>Select Equipment</button>
    <span>0</span>
</div>

当我点击第一个div中的button时，我想在第二个1的{{1}}标记中显示值span。然后，当我点击第二个div中的选择设备时，它应该在第三个div的{{1}}标记中显示2的值。任何人都可以提出解决方案如何做到这一点？

Answer 1

只需获取按钮组中点击的index的{{1}}，然后查找button span按钮索引+ 1并添加到{ {1}}您想要的文字。

* html *

eq

* css *

span

* js *

<div>
<button>Select Equipment 1</button>
<span>0</span>
</div>

<div>
<button>Select Equipment 2</button> 
<span>0</span>
</div>

<div>
<button>Select Equipment 3</button> 
<span>0</span>
</div>

Here's a fiddle

希望这有帮助。

Answer 2

使用parents获取父div并使用next和find获取下一个div和span并使用parseInt进行计算。

Working Fiddle

$(document).on('click', 'button', function() {
  var rVal = $(this).next('span').text();
  $(this).parents().next().find('span').text(parseInt(rVal) + 1);
});

Answer 3

请在html代码下方尝试此脚本。

请找到您的更新代码：

<div>
    <button>Select Equipment</button>
    <span>0</span>
</div>
<div>
    <button>Select Equipment</button>
    <span>0</span>
</div>
<div>
    <button>Select Equipment</button>
    <span>0</span>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $('div button').click(function() {
        var val = $(this).parent().index()+1;
        $(this).parent().next('div').find('span').html(val);
    });
});
</script>

希望，这可能对您有所帮助。

如何在jquery中单击前一个div时在下一个div html中显示一个值？

3 个答案: