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>