Ajax在foreach循环中仅获取首个值问题求助

问题根源 #

页面存在多个.ordr_id隐藏输入框，但代码中$('.ordr_id').val()默认仅返回第一个匹配元素的值，导致所有评分请求都传递同一个order_id。

解决方案（两种可选） #

方案一：将order_id存入评分组件的data属性（更简洁）

删除多余的隐藏输入框，直接把$storid存入评分select的自定义data属性：

<!-- 移除原隐藏输入框 <input class="ordr_id" ...> -->
<select class='rating' id='rating_<?php echo $postid; ?>' 
        data-id='rating_<?php echo $postid; ?>'
        data-order-id='<?php echo $storid; ?>'>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

修改JS代码，直接从当前评分元素的data属性取对应order_id：

$(function() {
  $('.rating').barrating({
    theme: 'fontawesome-stars',
    onSelect: function(value, text, event) {
      var el = this;
      var el_id = el.$elem.data('id');
      if (typeof(event) !== 'undefined') {
        var split_id = el_id.split("_");
        var postid = split_id[1];
        var userid = "<?php echo $current_user_id; ?>";
        // 从当前select的data属性获取对应order_id
        var order_id = el.$elem.data('order-id');
        
        $.ajax({
          url: 'rating_ajax.php',
          type: 'post',
          data: {
            postid: postid,
            rating: value,
            userid: userid,
            order_id: order_id
          },
          dataType: 'json',
          success: function(data) {
            var average = data['averageRating'];
            $('#avgrating_' + postid).text(average);
          }
        });
      }
    }
  });
});

方案二：通过DOM层级关联找到对应隐藏输入框

保留隐藏输入框，修改JS代码，基于当前评分元素的父容器定位对应.ordr_id：

$(function() {
  $('.rating').barrating({
    theme: 'fontawesome-stars',
    onSelect: function(value, text, event) {
      var el = this;
      var el_id = el.$elem.data('id');
      if (typeof(event) !== 'undefined') {
        var split_id = el_id.split("_");
        var postid = split_id[1];
        var userid = "<?php echo $current_user_id; ?>";
        // 定位当前select所在.post-action容器下的.ordr_id
        var order_id = el.$elem.closest('.post-action').find('.ordr_id').val();
        
        $.ajax({
          url: 'rating_ajax.php',
          type: 'post',
          data: {
            postid: postid,
            rating: value,
            userid: userid,
            order_id: order_id
          },
          dataType: 'json',
          success: function(data) {
            var average = data['averageRating'];
            $('#avgrating_' + postid).text(average);
          }
        });
      }
    }
  });
});

额外优化提示 #

• 删除HTML中重复的$(document).ready代码，所有评分初始化逻辑统一放在顶部的$(function(){})中，避免重复绑定。
• 可给每个.post-action容器添加唯一标识，进一步提升DOM查找的准确性。

内容的提问来源于stack exchange，提问作者nomi