JS 星级评分如何获得 MYSQL 的 <span> 值？

Question

来源：GitHub Dobtco starrr JS plugin

使用此插件，用户可以查看不同领域的公司并将数据存储在 MySQL 数据库中。

更新：我编辑了 javascript 文件，将星号用于 2 个不同的评论字段以供多次使用。

编码部分：用 K Scandrett 更新

<form method="post" name="review" action="<?php echo esc_url($_SERVER['PHP_SELF']); ?>">
  <div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">
        <div class="form-group">
    Review 1: <div id="stars_1" class="starrr" name ="rv_1" data-rating=<?php echo $rv_1 ?> ></div>  
    You gave a rating of <span id="count">0</span> star(s)
    <input type="hidden" class="form-control" id="rv_1" name="rv_1" value="2" />
        </div>
        <div class="form-group">
    Review 2: <div id="stars_2"  class="starrr" name ="rv_2" data-rating=<?php echo $rv_2 ?>></div>  
    You gave a rating of <span id="count_2">0</span> star(s)
    <input type="hidden" class="form-control" id="rv_2" name="rv_2" value="4" />
        </div>
  </div>
      <input type="hidden" value="<?php $user_id ?>" name ="user_id_review"/>
      <input type="hidden" value="<?php $company_id ?>" name ="company_id"/>
      <div class="panel-footer"><button type="submit" class="btn btn-default" name="review">Save</button></div>
  </div>
    </form>

Answer 1

当您阅读/更新input 时，请使用val()。

当您阅读/更新 span 时，请使用 text()（除非它包含您想要包含的 HTML）。

注意：您在value="<?php $user_id ?>" 和value="<?php $company_id ?> 中缺少echo 命令。

$(function() {

  var $s1Input = $('#rv_1');
  var $s2Input = $('#rv_2');

  $('#stars_1').starrr({
    rating: $s1Input.val(),
    change: function(e, value) {
      $('#count').text(value);
      $s1Input.val(value);
    }
  });

  $('#stars_2').starrr({
    rating: $s2Input.val(),
    change: function(e, value) {
      $('#count_2').text(value);
      $s2Input.val(value);
    }
  });
});

.starrr {
  display: inline-block;
}

.starrr a {
  font-size: 16px;
  padding: 0 1px;
  cursor: pointer;
  color: #FFD119;
  text-decoration: none;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://dobtco.github.io/starrr/dist/starrr.js"></script>
<div class="form-group">
  Review 1:
  <div id="stars_1" class="starrr"></div>
  You gave a rating of <span id="count">0</span> star(s)
  <input type="text" class="form-control" id="rv_1" name="rv_1" value="2" />
</div>
<div class="form-group">
  Review 2:
  <div id="stars_2" class="starrr"></div>
  You gave a rating of <span id="count_2">0</span> star(s)
  <input type="text" class="form-control" id="rv_2" name="rv_2" value="4" />
</div>