關于這種情況：下面是一些由 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">★</a> <a href="#4" class="click-trigger star-4" data-value="star-4" data-id="<?php echo $file_id; ?>" title="Vote 4 stars">★</a> <a href="#3" class="click-trigger star-3" data-value="star-3" data-id="<?php echo $file_id; ?>" title="Vote 3 stars">★</a> <a href="#2" class="click-trigger star-2" data-value="star-2" data-id="<?php echo $file_id; ?>" title="Vote 2 stars">★</a> <a href="#1" class="click-trigger star-1" data-value="star-1" data-id="<?php echo $file_id; ?>" title="Vote 1 star">★</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 中。我怎樣才能做到這一點？
1 回答
Qyouu
TA貢獻1786條經驗 獲得超11個贊
要解決此問題，您需要使用 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">★</a>
<a href="#4" class="click-trigger star-4" data-value="star-4" title="Vote 4 stars">★</a>
<a href="#3" class="click-trigger star-3" data-value="star-3" title="Vote 3 stars">★</a>
<a href="#2" class="click-trigger star-2" data-value="star-2" title="Vote 2 stars">★</a>
<a href="#1" class="click-trigger star-1" data-value="star-1" title="Vote 1 star">★</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);
}
});
});
- 1 回答
- 0 關注
- 143 瀏覽
添加回答
舉報
0/150
提交
取消