點擊明星後在表單中設置星級值

我正在實施星級評定，並在表單中使用字體真棒明星，但我不知道如何設置星號值。我在這個表單中有許多值，比如輸入和按鈕。但我不知道如何設定一個明星的價值。點擊明星後在表單中設置星級值

.rating { 
 
    unicode-bidi: bidi-override; 
 
    direction: rtl; 
 
    float:left; 
 
} 
 
.rating > span { 
 
    display: inline-block; 
 
    position: relative; 
 
    width: 1.1em; 
 
} 
 
.rating > span:hover:before, 
 
.rating > span:hover ~ span:before { 
 
    content: "\2605"; 
 
    position: absolute; 
 
}

<form> 
 
    <div class="rating"> 
 
    <span>☆</span><span>☆</span><span>☆</span><span>☆</span><span>☆</span> 
 
    </div> 
 
</form>

我想設置在明星的價值。點擊星星後，星星應該是黑色的。

來源

2016-05-16 V SH

單選按鈕將幫助你。看看[integration-css-star-rating-into-an-html-form]（http://stackoverflow.com/questions/8118266/integrating-css-star-rating-into-an-html-form） –

使用一些js/jQuery來爲當前元素應用active類，更換span與label和radio內

$(document).ready(function() { 
 
    $('label').click(function() { 
 
    $('label').removeClass('active'); 
 
    $(this).addClass('active'); 
 
    }); 
 
});

.rating { 
 
    unicode-bidi: bidi-override; 
 
    direction: rtl; 
 
    float: left; 
 
} 
 
.rating > label { 
 
    display: inline-block; 
 
    position: relative; 
 
    width: 1.1em; 
 
} 
 
.rating > label.active:before, 
 
.rating > label.active ~ label:before, 
 
.rating > label:hover:before, 
 
.rating > label:hover ~ label:before { 
 
    content: "\2605"; 
 
    position: absolute; 
 
} 
 
input { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <div class="rating"> 
 
    <label>☆ 
 
     <input type="radio" name="starValue" value="5" /> 
 
    </label> 
 
    <label>☆ 
 
     <input type="radio" name="starValue" value="4" /> 
 
    </label> 
 
    <label>☆ 
 
     <input type="radio" name="starValue" value="3" /> 
 
    </label> 
 
    <label>☆ 
 
     <input type="radio" name="starValue" value="2" /> 
 
    </label> 
 
    <label>☆ 
 
     <input type="radio" name="starValue" value="1" /> 
 
    </label> 
 
    </div> 
 
</form>

來源

2016-05-16 06:08:04 Justinas

如果你喜歡我的問題，然後投票給別人幫助。 –

當你的CSS/HTML邏輯套反向明星，你可以使用跨度的指標，並將其存儲在隱藏字段一樣，

$('.rating span').on('click',function(){ 
    $('#rate_holder').val(4-$(this).index()+1); 
    console.log($('#rate_holder').val()); 
});

看一看的fiddle here。這裏是爲了恢復當前索引（因爲索引總是從0開始4將是我們的最大值）並且加1從1到5設置它。

來源

2016-05-16 06:02:52

你的回答很好，但我也想改變星星的顏色。 –

https://jsfiddle.net/c9s4ooyn/1/然後試試這個。 –

如果您想刪除通常不被人民提供的評級，可以放置一個按鈕，說明刪除評級，然後將rate_holder的值設置爲0，並刪除.rating div的所有範圍的活動類。 –

不幸的是，noway實現這一目標使用純CSS & & HT ML。你會某種腳本來切換星級/星級...

我有一個工作演示使用jQuery API，這使得這個演示很簡潔...檢查出來！

<!DOCTYPE html> 
<html lang="en-US" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Star Rating Demo</title> 
    <link rel="stylesheet" type="text/css" href="./font-awesome.min.css"> 
</head> 
<body> 
    <h1>Star Rating Demo</h1> 

    <div class="rating"> 
     <span class="fa fa-star-o"></span> 
     <span class="fa fa-star-o"></span> 
     <span class="fa fa-star-o"></span> 
     <span class="fa fa-star-o"></span> 
     <span class="fa fa-star-o"></span> 
    </div> 



<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"></script> 
<script type="text/javascript"> 
    jQuery(".fa-star-o, .fa-star") 
     .on("click, mouseover", function (event) { 

     var star = jQuery(this) 

     jQuery(star).removeClass("fa-star-o").addClass("fa-star") 
      .prevAll() 
      .removeClass("fa-star-o").addClass("fa-star") 

     jQuery(star).nextAll() 
      .removeClass("fa-star").addClass("fa-star-o") 
    }) 
</script> 
</body> 
</html>

來源

2016-05-16 06:22:16

點擊明星後在表單中設置星級值

回答

相關問題