Question

当我点击框时，我需要更改分数，但只能在我点击的框中，但现在它在循环中的所有框中都会发生变化。我有group_id单击了哪个框但是，我如何加入text（）函数这个group_id或者什么解决方案对此有好处？

<div data-group="1" class="score">
   <!-- PHP loop -->
   <i data-nr="1" class="list"></i>
   <i data-nr="2" class="list"></i>
   <i data-nr="3" class="list"></i>
   <span class="list-score">25</span>
</div>

<div data-group="2" class="score">
   <!-- PHP loop -->
   <i data-nr="1" class="list"></i>
   <i data-nr="2" class="list"></i>
   <i data-nr="3" class="list"></i>
   <span class="list-score">18</span>
</div>

$('.list').click(function() {
   var group_id = $(this).closest('.score').data('group');
   $('.list-score').text(250);

});

Answer 1

您可以在父元素上下文中使用find()元素。

$('.list').click(function() {
    var score = $(this).closest('.score');
    score.find('.list-score').text(250);
    //var group_id = score.data('group');

    //.siblings() method can also be used
    $(this).siblings('.list-score').text(250);
});

Fiddle

Answer 2

使用find（）方法查找.list-score元素。试试这个：

演示：https://jsfiddle.net/L5v6qbyd/

$('.list').click(function() {
    $(this).closest('.score').find('.list-score').text(250);
});

Answer 3

您可以使用nextAll：

＆＃13;

$(function () {
  $('.list').click(function() {
    var group_id = $(this).closest('.score').data('group');
    $(this).nextAll('.list-score').text($(this).data('nr'));

  });
});

＆＃13;

.list {
  width: 50px;
  padding: 10px;
  border: 5px solid navy;
  margin: 10px;
  float: left;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div data-group="1" class="score">
    <!-- PHP loop -->
    <i data-nr="1" class="list"></i>
    <i data-nr="2" class="list"></i>
    <i data-nr="3" class="list"></i>
    <span class="list-score">25</span>
</div>

<div data-group="2" class="score">
    <!-- PHP loop -->
    <i data-nr="1" class="list"></i>
    <i data-nr="2" class="list"></i>
    <i data-nr="3" class="list"></i>
    <span class="list-score">18</span>
</div>

＆＃13;

将data-id附加到文本函数

3 个答案: