感觉这个问题就是比较难,至少对我来说,各种办法都试了,就是定位不了dom,所以掏学费求解决办法。
而且我希望您最好copy到本地运行一下再解决,不然,直接看代码估计比较难解决。
PS:其中的各种js是肯定要用的,也就是说,代码的运行环境和运行流程都不能变化的情况下,把alert中所求的三个变量给算出来(一共四个alert,第一个算是敲门砖,后面就可以登堂入室了~吧? 不确定啊~)。
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://www.jq22.com/demo/jQueryRatyli20160315/js/jquery.ratyli.js"></script>
<div id="commbox">谁要是每点击一次五星中的任意一颗星,都可以把代码中的四个alert准确的报出来,我就服了谁!!<br><br><br></div>
<div class="heart">先点我这颗爱心吧,放心,不会怀孕。<i class="fa fa-heart"></i></div>
<script>
$(document).ready(function() {
$(".fa-heart").click(function() {
var $commbox = $("#commbox");
var rating_id = 1
if ($commbox.find("#" + rating_id).length) {
$commbox.find("#" + rating_id).remove();
return;
}
var $new_p = $("<div id='" + rating_id + "'><label>店长</label><span>王胖子</span><span class='ratyli'></span></div>");
$commbox.append($new_p);
$new_p.find(".ratyli").ratyli({
full: "<i class='fa fa-star'></i>",
empty: "<i class='fa fa-star-o'></i>",
});
});
//$("#commbox").delegate('.ratyli .rate', 'click', function() {
$("#commbox").on("click", ".ratyli .rate",
function() {
alert("我点击上了,我!我!我!看我,看我,是我,我!!!");
alert("我还知道<label>里面的字是什么——正确答案:店长。不允许直接写答案,要过程的哦");
alert("我还知道距离五星最近的<span>里面的字是——正确答案:王胖子。不允许直接写答案,要过程的哦");
alert("我还取到了五星好评后.ratyli 的data-rate的值——正确答案看你点了第几颗星,点几颗就是几。不允许直接写答案,要过程的哦");
});
});
</script>
<style>
.ratyli .rate-active{
color:#ff0080;
}
.ratyli i {
font-size: 80px;
color:#800080;
}
.fa-heart {
font-size: 40px;
color:#f00;
}
.heart {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#commbox {
position: absolute;
top: 50px;
left: 50%;
transform: translateX(-50%);
width: 100%;
text-align: center;
}
</style>