如何将 ajax 回调发送到由 foreach 循环生成的特定 div

Question

关于这种情况：

下面是一些 html（评级星），它们是由 php 中的 foreach 循环生成的。所以我有很多 div 和 class rating。 $file_id 是独一无二的，每个 div 都不一样！

<div class="rating" data-rating="<?php echo $round;?>">
    <div class="rating-stars">                  
        <a href="#5" class="click-trigger star-5" data-value="star-5" data-id="<?php echo $file_id; ?>" title="Vote 5 stars">&#x2605</a>
        <a href="#4" class="click-trigger star-4" data-value="star-4" data-id="<?php echo $file_id; ?>" title="Vote 4 stars">&#x2605</a>
        <a href="#3" class="click-trigger star-3" data-value="star-3" data-id="<?php echo $file_id; ?>" title="Vote 3 stars">&#x2605</a>
        <a href="#2" class="click-trigger star-2" data-value="star-2" data-id="<?php echo $file_id; ?>" title="Vote 2 stars">&#x2605</a>
        <a href="#1" class="click-trigger star-1" data-value="star-1" data-id="<?php echo $file_id; ?>" title="Vote 1 star">&#x2605</a>
    </div>
    <div class="rating-votes">
        Average: <span id="count-avg"><?php echo $avg;?></span> Votes: <span id="count-total"><?php echo array_sum($count);?></span>
    </div>

</div>

我的 jquery ajax 看起来像这样：

$('.click-trigger').on('click', function(e) {
    e.preventDefault(); 

    var value = $(this).data('value');
    var file_id = $(this).data('id');

    $.ajax({
        url: 'counter.php',
        type: 'POST',
        data: { 
            value:value,
            file_id:file_id         
            },
        success: function(data){
            $('.rating-votes').html(data);

        }
    });

});

并且文件 counter.php 将此回显作为回调：

echo '<div class="text-success">Thanks for voting!</div>';

问题是：在每个 div 和 class .rating-votes 出现回声。但它应该只出现在 div 中点击了其中一颗评级星。

我怎样才能做到这一点？

Answer 1

要解决此问题，您需要使用 jQuery 的 DOM 遍历方法来检索与单击的开始相关的 .rating-votes 元素。在这种情况下使用 closest() 和 next().

另请注意，您应该通过将单个公共容器上的 data-id 属性放到 .click-trigger 元素上而不是在每个元素上重复它来使代码变干。试试这个：

<div class="rating" data-rating="<?php echo $round;?>">
  <div class="rating-stars" data-id="<?php echo $file_id; ?>">
    <a href="#5" class="click-trigger star-5" data-value="star-5" title="Vote 5 stars">&#x2605</a>
    <a href="#4" class="click-trigger star-4" data-value="star-4" title="Vote 4 stars">&#x2605</a>
    <a href="#3" class="click-trigger star-3" data-value="star-3" title="Vote 3 stars">&#x2605</a>
    <a href="#2" class="click-trigger star-2" data-value="star-2" title="Vote 2 stars">&#x2605</a>
    <a href="#1" class="click-trigger star-1" data-value="star-1" title="Vote 1 star">&#x2605</a>
  </div>
  <div class="rating-votes">
    Average: <span id="count-avg"><?php echo $avg;?></span> Votes: <span id="count-total"><?php echo array_sum($count);?></span>
  </div>
</div>

$('.click-trigger').on('click', function(e) {
  e.preventDefault();
  let $star = $(this);
  let $container = $star.closest('.rating-stars');

  $.ajax({
    url: 'counter.php',
    type: 'POST',
    data: {
      value: $star.data('value'),
      file_id: $container.data('id')
    },
    success: function(data) {
      $container.next('.rating-votes').html(data);
    }
  });
});

如何将 ajax 回调发送到由 foreach 循环生成的特定 div

how to send ajax callback to specific div which are generated by foreach loop

php

ajax

jquery

callback

echo