jQuery怎么把留言板和星級評價結(jié)合到一起？ javascript jquery html 怎么將星級評價追
jQuery怎么把留言板和星級評價結(jié)合到一起？
javascript
jquery
html
怎么將星級評價追加進去？
?
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>留言板</title>
? ? <style>
? ? ? ? body{
? ? ? ? ? ? border-style: double;
? ? ? ? ? ? margin: 10% 20%;
? ? ? ? }
? ? ? ? h2{text-align: center;}
? ? ? ? #ly{
? ? ? ? ? ? font-size: 15px;
? ? ? ? ? ? height: 300px;
? ? ? ? ? ? overflow: auto;
? ? ? ? }
? ? ? ? #text{
? ? ? ? ? ? width: 99%;
? ? ? ? ? ? height: 85px;
? ? ? ? }
? ? ? ? #name{
? ? ? ? ? ? width: 99%;
? ? ? ? ? ? height: 15px
? ? ? ? }
? ? ? ? #show,#hide,#submit{float: right;}
? ? ? ? p{font-size: 10px;}
? ? ? ? #x{
? ? ? ? position:absolute;
? ? ? ? right: 22%;
? ? ? ? }
? ? </style>
? ? <script src="jquery-1.12.4.min.js"></script>
? ? <script>
? ? ? ? $(function(){
? ? ? ? ? ? var n = 1;
? ? ? ? ? ? $("#submit").click(function(){
? ? ? ? ? ? ? ? if($('#text').val()==""){
? ? ? ? ? ? ? ? ? ? alert("不要輸入空內(nèi)容！??");
? ? ? ? ? ? ? ? ? ? return;
? ? ? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? ? ? if($('#name').val()==""){
? ? ? ? ? ? ? ? ? ? ? ? $('#name').val("匿名");
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? var name=$('#name').val();
? ? ? ? ? ? ? ? ? ? var text=$('#text').val();
? ? ? ? ? ? ? ? ? ? //var newMsg='<p>第'+n+'條：' + $('#name').val() + '：' + $('#text').val() + '</p>';
? ? ? ? ? ? ? ? ? ? var xin=$("<p><i>第"+n+"條："+name+": </i>\n<b> "+text+"</b><span id='x'><a>刪除</a></span>"+"</p>");
? ? ? ? ? ? ? ? ? ? //var newStar='<div>' +$('.star').val()+'</div>';
? ? ? ? ? ? ? ? ? ? //var historyMsg = $("#ly").html();
? ? ? ? ? ? ? ? ? ? //$("#ly").html(newMsg+historyMsg);
? ? ? ? ? ? ? ? ? ? $("#ly").append(xin);
? ? ? ? ? ? ? ? ? ? n++;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? });
? ? ? ? ? ??
? ? ? ? });
? ? </script>
</head>
<body>
? ? <h2>留言板</h2>
? ? <hr color="black"/>
? ? <div id="ly"></div>
? ? <hr color="black"/>
? ? <div>昵稱</div>
? ? <textarea id="name" style="resize: none;"></textarea>
? ? <div>內(nèi)容</div>
? ? <textarea id="text" style="resize: none;"></textarea>
? ? <div>
? ? ? ? ? ? <span data-value="1">☆</span>
? ? ? ? ? ? <span data-value="2">☆</span>
? ? ? ? ? ? <span data-value="3">☆</span>
? ? ? ? ? ? <span data-value="4">☆</span>
? ? ? ? ? ? <span data-value="5">☆</span>
? ? </div>
? ? <br>
? ? <button id="use">使用說明</button>
? ? <button id="hide">隱藏</button>
? ? <button id="show">顯示</button>
? ? <button id="submit">發(fā)言</button>
? ? <script>
? ? ? ? $("#ly").on("click","p",function(){
? ? ? ? ? ? $(this).hide();
? ? ? ? });
? ? ? ? //on()方法：在某個元素上面（on）綁定一個事件
? ? ? ? $("#hide").click(function(){
? ? ? ? ? ? $("p").hide();
? ? ? ? });
? ? ? ? $("#show").click(function(){
? ? ? ? ? ? $("p").show();
? ? ? ? });
? ? ? ? $("#use").click(function(){
? ? ? ? ? ? alert("湊數(shù)的");
? ? ? ? });
? ? ? ? $(".tm").css("background-color","yellow");
?
? ? ? ??
? ? ? ? $(".star span").click(function () {
? ? ? ? ? ? $(this).html("★").addClass("selected");
?
? ? ? ? ? ? var value = $(this).data("value");
?
? ? ? ? ? ? $(this).prevAll().html("★").addClass("selected");
? ? ? ? ? ? $(this).nextAll().html("☆").removeClass("selected");
? ? ? ? });
? ? ? ? ? ??
? ? </script>
</body>
要將星級評價追加到留言板中，可以按照以下步驟進行操作：
1. 在HTML中，為每個留言添加一個空的`<div>`元素，用于顯示星級評價。修改留言的`<p>`標(biāo)簽如下：
```html
var xin=$("<p><i>第"+n+"條："+name+": </i>\n<b> "+text+"</b><span id='x'><a>刪除</a></span>"+"</p>").append("<div></div>");
```
2. 在JavaScript代碼中，為星級評價的每個`<div>`元素添加點擊事件處理程序。在點擊事件處理程序中，將評價值存儲到與每個留言關(guān)聯(lián)的數(shù)據(jù)屬性中，并修改顯示樣式。
```javascript
$(".star span").click(function () {
? ? var value = $(this).data("value");
? ? $(this).parent().data("rating", value);
? ? $(this).html("★").addClass("selected");
? ? $(this).prevAll().html("★").addClass("selected");
? ? $(this).nextAll().html("☆").removeClass("selected");
});
```
3. 在提交留言時，獲取每個留言的星級評價值，并將其添加到留言的標(biāo)簽中。
```javascript
var rating = $(xin).find(".star").data("rating");
$(xin).append("<span>評分：" + rating + "</span>");
```
完整的修改后的代碼如下：
```html
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>留言板</title>
? ? <style>
? ? ? ? body{
? ? ? ? ? ? border-style: double;
? ? ? ? ? ? margin: 10% 20%;
? ? ? ? }
? ? ? ? h2{text-align: center;}
? ? ? ? #ly{
? ? ? ? ? ? font-size: 15px;
? ? ? ? ? ? height: 300px;
? ? ? ? ? ? overflow: auto;
? ? ? ? }
? ? ? ? #text{
? ? ? ? ? ? width: 99%;
? ? ? ? ? ? height: 85px;
? ? ? ? }
? ? ? ? #name{
? ? ? ? ? ? width: 99%;
? ? ? ? ? ? height: 15px
? ? ? ? }
? ? ? ? #show,#hide,#submit{float: right;}
? ? ? ? p{font-size: 10px;}
? ? ? ? #x{
? ? ? ? position:absolute;
? ? ? ? right: 22%;
? ? ? ? }
? ? </style>
? ? <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
? ? <script>
? ? ? ? $(function(){
? ? ? ? ? ? var n = 1;
? ? ? ? ? ? $("#submit").click(function(){
? ? ? ? ? ? ? ? if($('#text').val()==""){
? ? ? ? ? ? ? ? ? ? alert("不要輸入空內(nèi)容！??");
? ? ? ? ? ? ? ? ? ? return;
? ? ? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? ? ? if($('#name').val()==""){
? ? ? ? ? ? ? ? ? ? ? ? $('#name').val("匿名");
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? var name=$('#name').val();
? ? ? ? ? ? ? ? ? ? var text=$('#text').val();
? ? ? ? ? ? ? ? ? ? var xin=$("<p><i>第"+n+"條："+name+": </i>\n<b> "+text+"</b><span id='x'><a>刪除</a></span>"+"</p>").append("<div></div>");
? ? ? ? ? ? ? ? ? ? var rating = $(xin).find(".star").data("rating");
? ? ? ? ? ? ? ? ? ? $(xin).append("<span>評分：" + rating + "</span>");
? ? ? ? ? ? ? ? ? ? $("#ly").append(xin);
? ? ? ? ? ? ? ? ? ? n++;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? });
? ? ? ? ? ? ? ??
? ? ? ? ? ? $("#ly").on("click","p",function(){
? ? ? ? ? ? ? ? $(this).hide();
? ? ? ? ? ? });
? ? ? ? ? ??
? ? ? ? ? ? $("#hide").click(function(){
? ? ? ? ? ? ? ? $("p").hide();
? ? ? ? ? ? });
? ? ? ? ? ??
? ? ? ? ? ? $("#show").click(function(){
? ? ? ? ? ? ? ? $("p").show();
? ? ? ? ? ? });
? ? ? ? ? ??
? ? ? ? ? ? $("#use").click(function(){
? ? ? ? ? ? ? ? alert("湊數(shù)的");
? ? ? ? ? ? });
? ? ? ? ? ??
? ? ? ? ? ? $(".tm").css("background-color","yellow");
? ? ? ? ? ??
? ? ? ? ? ? $(".star span").click(function () {
? ? ? ? ? ? ? ? var value = $(this).data("value");
? ? ? ? ? ? ? ? $(this).parent().data("rating", value);
? ? ? ? ? ? ? ? $(this).html("★").addClass("selected");
? ? ? ? ? ? ? ? $(this).prevAll().html("★").addClass("selected");
? ? ? ? ? ? ? ? $(this).nextAll().html("☆").removeClass("selected");
? ? ? ? ? ? });
? ? ? ? });
? ? </script>
</head>
<body>
? ? <h2>留言板</h2>
? ? <hr color="black"/>
? ? <div id="ly"></div>
? ? <hr color="black"/>
? ? <div>昵稱</div>
? ? <textarea id="name" style="resize: none;"></textarea>
? ? <div>內(nèi)容</div>
? ? <textarea id="text" style="resize: none;"></textarea>
? ? <div>
? ? ? ? <span data-value="1">☆</span>
? ? ? ? <span data-value="2">☆</span>
? ? ? ? <span data-value="3">☆</span>
? ? ? ? <span data-value="4">☆</span>
? ? ? ? <span data-value="5">☆</span>
? ? </div>
? ? <br>
? ? <button id="use">使用說明</button>
? ? <button id="hide">隱藏</button>
? ? <button id="show">顯示</button>
? ? <button id="submit">發(fā)言</button>
</body>
</html>
```
通過以上代碼的修改，你現(xiàn)在可以在留言中選擇星級評價，并將其顯示在每條留言的下方。要將星級評價追加到留言板中，可以在提交留言的事件處理函數(shù)內(nèi)添加相關(guān)代碼。
首先，在HTML部分，可以在每條留言的p標(biāo)簽后面添加一個span標(biāo)簽，用于顯示星級評價。將以下代碼添加到留言板的JavaScript事件處理函數(shù)內(nèi)部：
```javascript
// 在提交留言的事件處理函數(shù)內(nèi)部
var starRating = $(".star .selected").length;
var starSpan = $("<span>").html("星級評價: " + starRating);
xin.append(starSpan);
```
然后，在星級評價的點擊事件處理函數(shù)內(nèi)部添加以下代碼，以便在點擊星級評價時更新星級評價的顯示：
```javascript
// 在星級評價的點擊事件處理函數(shù)內(nèi)部
$(".star span").click(function () {
? ? $(this).html("★").addClass("selected");
? ??
? ? var value = $(this).data("value");
? ??
? ? $(this).prevAll().html("★").addClass("selected");
? ? $(this).nextAll().html("☆").removeClass("selected");
? ??
? ? // 更新留言的星級評價顯示
? ? var starRating = $(this).parent().find(".selected").length;
? ? $(this).parent().find("span").html("星級評價: " + starRating);
});
```
這樣，在每條留言后面就會顯示對應(yīng)的星級評價。
完整的修改后的代碼如下：
```html
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>留言板</title>
? ? <style>
? ? ? ? /* ... 留言板樣式 ... */
? ? </style>
? ? <script src="jquery-1.12.4.min.js"></script>
? ? <script>
? ? ? ? $(function(){
? ? ? ? ? ? // ... 留言板事件處理 ...
? ? ? ? ? ? var n = 1;
? ? ? ? ? ? $("#submit").click(function(){
? ? ? ? ? ? ? ? // ... 留言板提交事件處理 ...
? ? ? ? ? ? ? ? // 獲取星級評價的值
? ? ? ? ? ? ? ? var starRating = $(".star .selected").length;
? ? ? ? ? ? ? ? // 創(chuàng)建顯示星級評價的span元素
? ? ? ? ? ? ? ? var starSpan = $("<span>").html("星級評價: " + starRating);
? ? ? ? ? ? ? ? // 將星級評價追加到留言中
? ? ? ? ? ? ? ? xin.append(starSpan);
? ? ? ? ? ? ? ? n++;
? ? ? ? ? ? });
? ? ? ? ? ??
? ? ? ? ? ? // ... 星級評價事件處理 ...
? ? ? ? ? ? $(".star span").click(function () {
? ? ? ? ? ? ? ? // ... 星級評價點擊事件處理 ...
? ? ? ? ? ? ? ? // 更新星級評價的顯示
? ? ? ? ? ? ? ? var starRating = $(this).parent().find(".selected").length;
? ? ? ? ? ? ? ? $(this).parent().find("span").html("星級評價: " + starRating);
? ? ? ? ? ? });
? ? ? ? });
? ? </script>
</head>
<body>
? ? <!-- ... 留言板內(nèi)容 ... -->
? ??
? ? <textarea id="text" style="resize: none;"></textarea>
? ? <div>
? ? ? ? <span data-value="1">☆</span>
? ? ? ? <span data-value="2">☆</span>
? ? ? ? <span data-value="3">☆</span>
? ? ? ? <span data-value="4">☆</span>
? ? ? ? <span data-value="5">☆</span>
? ? </div>
? ? <!-- ... 其他按鈕和事件處理 ... -->
</body>
</html>
```
此時，提交留言后，留言板中的每條留言后面都會顯示對應(yīng)的星級評價。要將星級評價追加到留言板中，可以在留言板中的每條留言后面添加星級評價部分。以下是修改后的代碼：
```html
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>留言板</title>
? ? <style>
? ? ? ? body{
? ? ? ? ? ? border-style: double;
? ? ? ? ? ? margin: 10% 20%;
? ? ? ? }
? ? ? ? h2{text-align: center;}
? ? ? ? #ly{
? ? ? ? ? ? font-size: 15px;
? ? ? ? ? ? height: 300px;
? ? ? ? ? ? overflow: auto;
? ? ? ? }
? ? ? ? #text{
? ? ? ? ? ? width: 99%;
? ? ? ? ? ? height: 85px;
? ? ? ? }
? ? ? ? #name{
? ? ? ? ? ? width: 99%;
? ? ? ? ? ? height: 15px
? ? ? ? }
? ? ? ? #show,#hide,#submit{float: right;}
? ? ? ? p{font-size: 10px;}
? ? ? ? #x{
? ? ? ? ? ? position:absolute;
? ? ? ? ? ? right: 22%;
? ? ? ? }
? ? ? ? .star span{
? ? ? ? ? ? cursor: pointer;
? ? ? ? }
? ? ? ? .selected{
? ? ? ? ? ? color: gold;
? ? ? ? }
? ? </style>
? ? <script src="jquery-1.12.4.min.js"></script>
? ? <script>
? ? ? ? $(function(){
? ? ? ? ? ? var n = 1;
? ? ? ? ? ? $("#submit").click(function(){
? ? ? ? ? ? ? ? if($('#text').val()==""){
? ? ? ? ? ? ? ? ? ? alert("不要輸入空內(nèi)容！??");
? ? ? ? ? ? ? ? ? ? return;
? ? ? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? ? ? if($('#name').val()==""){
? ? ? ? ? ? ? ? ? ? ? ? $('#name').val("匿名");
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? var name=$('#name').val();
? ? ? ? ? ? ? ? ? ? var text=$('#text').val();
? ? ? ? ? ? ? ? ? ? var xin=$("<p><i>第"+n+"條："+name+": </i>\n<b> "+text+"</b><span id='x'><a>刪除</a></span></p>");
? ? ? ? ? ? ? ? ? ? var starRating = $('<div></div>');
? ? ? ? ? ? ? ? ? ? var stars = $(".star span.selected").clone();
? ? ? ? ? ? ? ? ? ? starRating.append(stars);
? ? ? ? ? ? ? ? ? ? $("#ly").append(xin);
? ? ? ? ? ? ? ? ? ? $("#ly").append(starRating);
? ? ? ? ? ? ? ? ? ? n++;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? });
? ? ? ? ? ??
? ? ? ? });
? ? </script>
</head>
<body>
? ? <h2>留言板</h2>
? ? <hr color="black"/>
? ? <div id="ly"></div>
? ? <hr color="black"/>
? ? <div>昵稱</div>
? ? <textarea id="name" style="resize: none;"></textarea>
? ? <div>內(nèi)容</div>
? ? <textarea id="text" style="resize: none;"></textarea>
? ? <div>
? ? ? ? ? ? <span data-value="1">☆</span>
? ? ? ? ? ? <span data-value="2">☆</span>
? ? ? ? ? ? <span data-value="3">☆</span>
? ? ? ? ? ? <span data-value="4">☆</span>
? ? ? ? ? ? <span data-value="5">☆</span>
? ? </div>
? ? <br>
? ? <button id="use">使用說明</button>
? ? <button id="hide">隱藏</button>
? ? <button id="show">顯示</button>
? ? <button id="submit">發(fā)言</button>
? ? <script>
? ? ? ? $("#ly").on("click","p",function(){
? ? ? ? ? ? $(this).hide();
? ? ? ? });
? ? ? ? $("#hide").click(function(){
? ? ? ? ? ? $("p").hide();
? ? ? ? });
? ? ? ? $("#show").click(function(){
? ? ? ? ? ? $("p").show();
? ? ? ? });
? ? ? ? $("#use").click(function(){
? ? ? ? ? ? alert("湊數(shù)的");
? ? ? ? });
? ? ? ? $(".tm").css("background-color","yellow");
?
? ? ? ? $(".star span").click(function () {
? ? ? ? ? ? $(this).html("★").addClass("selected");
?
? ? ? ? ? ? var value = $(this).data("value");
?
? ? ? ? ? ? $(this).prevAll().html("★").addClass("selected");
? ? ? ? ? ? $(this).nextAll().html("☆").removeClass("selected");
? ? ? ? });
? ? ? ? ? ??
? ? </script>
</body>
</html>
```
在修改后的代碼中，我添加了一個名為"star-rating"的div元素，用于包裹星級評價的星星。在點擊"發(fā)言"按鈕后，將選中的星星克隆并追加到留言內(nèi)容的后面。這樣就實現(xiàn)了將星級評價追加進留言板的功能。服務(wù)器出了會小差！請重試！
