jQuery怎么把留言板和星级评价结合到一起？ javascript jquery html 怎么将星级评价追
jQuery怎么把留言板和星级评价结合到一起？
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("不要输入空内容！😅");
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>内容</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">发言</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("凑数的");
});
$(".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>`标签如下：
```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>`元素添加点击事件处理程序。在点击事件处理程序中，将评价值存储到与每个留言关联的数据属性中，并修改显示样式。
```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. 在提交留言时，获取每个留言的星级评价值，并将其添加到留言的标签中。
```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("不要输入空内容！😅");
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("凑数的");
});
$(".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>内容</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">发言</button>
</body>
</html>
```
通过以上代码的修改，你现在可以在留言中选择星级评价，并将其显示在每条留言的下方。要将星级评价追加到留言板中，可以在提交留言的事件处理函数内添加相关代码。
首先，在HTML部分，可以在每条留言的p标签后面添加一个span标签，用于显示星级评价。将以下代码添加到留言板的JavaScript事件处理函数内部：
```javascript
// 在提交留言的事件处理函数内部
var starRating = $(".star .selected").length;
var starSpan = $("<span>").html("星级评价: " + starRating);
xin.append(starSpan);
```
然后，在星级评价的点击事件处理函数内部添加以下代码，以便在点击星级评价时更新星级评价的显示：
```javascript
// 在星级评价的点击事件处理函数内部
$(".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);
});
```
这样，在每条留言后面就会显示对应的星级评价。
完整的修改后的代码如下：
```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;
// 创建显示星级评价的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>
<!-- ... 留言板内容 ... -->
<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>
```
此时，提交留言后，留言板中的每条留言后面都会显示对应的星级评价。要将星级评价追加到留言板中，可以在留言板中的每条留言后面添加星级评价部分。以下是修改后的代码：
```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("不要输入空内容！😅");
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>内容</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">发言</button>
<script>
$("#ly").on("click","p",function(){
$(this).hide();
});
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
$("#use").click(function(){
alert("凑数的");
});
$(".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元素，用于包裹星级评价的星星。在点击"发言"按钮后，将选中的星星克隆并追加到留言内容的后面。这样就实现了将星级评价追加进留言板的功能。服务器出了会小差！请重试！
