javascript - 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)。

注意:您缺少 echo命令 value="<?php $user_id ?>"和value="<?php $company_id ?> .

$(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>