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

Question

关于这种情况：

下面是一些由 php.ini 中的 foreach 循环生成的 html（评级星）。所以我有很多带有类的 div 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 中都会.rating-votes出现回声。但它应该只出现在点击了其中一颗评级星的 div 中。

我怎样才能做到这一点？

Answer 1

要解决此问题，您需要使用 jQuery 的 DOM 遍历方法来检索.rating-votes与单击的开始相关的元素。在这种情况下使用closest()和next()。另请注意，您应该通过将data-id单个公共容器上的属性放在.click-trigger元素上来干燥代码，而不是在每个单独容器上重复它。尝试这个：<div class="rating" data-rating="<?php echo $round;?>">&nbsp; <div class="rating-stars" data-id="<?php echo $file_id; ?>">&nbsp; &nbsp; <a href="#5" class="click-trigger star-5" data-value="star-5" title="Vote 5 stars">&#x2605</a>&nbsp; &nbsp; <a href="#4" class="click-trigger star-4" data-value="star-4" title="Vote 4 stars">&#x2605</a>&nbsp; &nbsp; <a href="#3" class="click-trigger star-3" data-value="star-3" title="Vote 3 stars">&#x2605</a>&nbsp; &nbsp; <a href="#2" class="click-trigger star-2" data-value="star-2" title="Vote 2 stars">&#x2605</a>&nbsp; &nbsp; <a href="#1" class="click-trigger star-1" data-value="star-1" title="Vote 1 star">&#x2605</a>&nbsp; </div>&nbsp; <div class="rating-votes">&nbsp; &nbsp; Average: <span id="count-avg"><?php echo $avg;?></span> Votes: <span id="count-total"><?php echo array_sum($count);?></span>&nbsp; </div></div>$('.click-trigger').on('click', function(e) {&nbsp; e.preventDefault();&nbsp; let $star = $(this);&nbsp; let $container = $star.closest('.rating-stars');&nbsp; $.ajax({&nbsp; &nbsp; url: 'counter.php',&nbsp; &nbsp; type: 'POST',&nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; value: $star.data('value'),&nbsp; &nbsp; &nbsp; file_id: $container.data('id')&nbsp; &nbsp; },&nbsp; &nbsp; success: function(data) {&nbsp; &nbsp; &nbsp; $container.next('.rating-votes').html(data);&nbsp; &nbsp; }&nbsp; });});