嗨，我已经创建了以下编码来评级星级。
<body>
<button id="onestar"><span class="glyphicon glyphicon-star-empty" onclick="ratingFunction('1')"></span></button>
<button id="onestarfill" hidden><span class="glyphicon glyphicon-star" style="color:yellow" id="onestar" onclick="ratingFunction('1')" ></span></button>
<button id="twostar"><span class="glyphicon glyphicon-star-empty" id="twostar" onclick="ratingFunction('2')"></span></button>
<button id="twostarfill" hidden><span class="glyphicon glyphicon-star-empty" style="color: yellow" id="twostar" onclick="ratingFunction('2')" hidden></span></button>
<button id="threestar"><span class="glyphicon glyphicon-star-empty" id="threestar" onclick="ratingFunction('3')"></span></button>
<button id="threestarfill" hidden><span class="glyphicon glyphicon-star-empty" style="color: yellow"id="threestar" onclick="ratingFunction('3')" hidden></span></button>
<button id="fourstar"><span class="glyphicon glyphicon-star-empty" id="fourstar" onclick="ratingFunction('4')"></span></button>
<button id="fourstarfill" hidden><span class="glyphicon glyphicon-star-empty" style="color: yellow"id="fourstar" onclick="ratingFunction('4')" hidden></span></button>
<button id="fivestar"><span class="glyphicon glyphicon-star-empty" id="fivestar" onclick="ratingFunction('5')"></span></button>
<button id="fivestarfill" hidden><span class="glyphicon glyphicon-star-empty" style="color: yellow"id="fivestar" onclick="ratingFunction('5')" hidden></span></button>
<script>
function ratingFunction(intValue){
var finder_id=<?php echo $rowpic['f_id']?>;
var user_id="<?php echo $_SESSION['Uid'];?>";//document.getElementById("#user_id_of_rater").value;
var action='rate_to_finder';
var rate=intValue;
if(intValue=='1')
{
$.post('db/db_add_star_rate.php',{'user_id':user_id ,'action':action, 'rate':rate,'finder_id':finder_id},function(data){
alert(data);
});
$("#onestar").hide();
$("#onestarfill").show();
}
else if(intValue=='2')
{
$.post('db/db_add_star_rate.php',{'user_id':user_id ,'action':action, 'rate':rate,'finder_id':finder_id},function(data){
alert(data);
});
$("#twostar").hide();
$("#twostarfill").show();
}
else if(intValue=='3')
{
$.post('db/db_add_star_rate.php',{'user_id':user_id ,'action':action, 'rate':rate,'finder_id':finder_id},function(data){
alert(data);
});
$("#threestar").hide();
$("#threestarfill").show();
}
else if(intValue=='4')
........
}
</script>
</body>
所以我想当我点击 id='thirdstar' 时，它应该隐藏以下 id onestar、twostar 和 Threestar。并应显示 onestarfil、twostarfil 和 Threestarfil。我怎样才能做到这一点。
最佳答案
基本思想，没有所有的 if 和 else，也不需要每个状态有多个按钮。
$(".stars").on("click", "button", function() {
$(this) //the button that was clicked
.prevAll("button") //find previous buttons
.addBack() //add in the button that was clicked
.find("span") //find the spans in the butto
.addClass("glyphicon-star") //check the star
.removeClass("glyphicon-star-empty"); //uncheck the star
$(this)
.nextAll("button")
.find("span")
.removeClass("glyphicon-star")
.addClass("glyphicon-star-empty");
console.log(this.value); //the value of the star that was selected
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="stars">
<button value="1"><span class="glyphicon glyphicon-star-empty"></span>
</button>
<button value="2"><span class="glyphicon glyphicon-star-empty"></span>
</button>
<button value="3"><span class="glyphicon glyphicon-star-empty"></span>
</button>
<button value="4"><span class="glyphicon glyphicon-star-empty"></span>
</button>
<button value="5"><span class="glyphicon glyphicon-star-empty"></span>
</button>
</div>关于javascript - 使用 html 和 javascript 添加星标，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32501889/