评级星小部件 - 如何动态检查星级

Question

我正致力于评级明星。我的问题是如何动态检查星星，例如，如果我们传递值为4.2的变量，则动态4.2星号four an half星号必须进行检查。

我如何使用JQuery实现这一目标？这是我的HTML：

感谢。

$(document).ready(function(){

    var value = 3;
    $("input[name=rating][value=" + value + "]").attr('checked', 'checked');
});

.rating_widgets {
	display: flex;
  margin-top: 25px;
}
.rating { 
  border: none;
  float: left;
}
.rating > input { display: none; } 
.rating > label:before { 
  margin: 5px;
  font-size: 24px;
  font-family: FontAwesome;
  display: inline-block;
  content: "\f005";
}
.rating > .half:before { 
  content: "\f089";
  position: absolute;
}
.rating > label { 
  color: #ddd; 
 float: right; 
}
.rating > input:checked ~ label, 
.rating:not(:checked),
.rating:not(:checked){ color: #FFD700;  }

.rating > input:checked, 
.rating > input:checked,
.rating > input:checked ~ label, 
.rating > input:checked ~ label { 
	color: #FFED85;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://use.fontawesome.com/a2e210f715.js"></script>
<div class="rating_widgets">
	<fieldset class="rating">
		<input type="radio" id="star5" name="rating"/>
		<label class = "full" for="star5" title="Awesome - 5 stars"></label>
		<input type="radio" id="star4half" name="rating" value="4 and a half" />
		<label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
		<input type="radio" id="star4" name="rating" value="4" />
		<label class = "full" for="star4" title="Pretty good - 4 stars"></label>
		<input type="radio" id="star3half" name="rating" value="3 and a half" />
		<label class="half" for="star3half" title="Good - 3.5 stars"></label>
		<input type="radio" id="star3" name="rating" value="3" />
		<label class = "full" for="star3" title="Good - 3 stars"></label>
		<input type="radio" id="star2half" name="rating" value="2 and a half" />
		<label class="half" for="star2half" title="ok - 2.5 stars"></label>
		<input type="radio" id="star2" name="rating" value="2" />
		<label class = "full" for="star2" title="ok - 2 stars"></label>
		<input type="radio" id="star1half" name="rating" value="1 and a half" />
		<label class="half" for="star1half" title="Bad - 1.5 stars"></label>
		<input type="radio" id="star1" name="rating" value="1" />
		<label class = "full" for="star1" title="Very bad - 1 star"></label>
		<input type="radio" id="starhalf" name="rating" value="half" />
		<label class="half" for="starhalf" title="Very bad - 0.5 stars"></label>
 </fieldset>
  </div><!-- .rating_widget-->
  <p class="figcaption">4.2 Stars-Based on 1540 Users Reviews</p>

Answer 1

所以这里的问题是你通过评级值（例如4.4）选择的输入字段的值是相当不规则的（例如“4个半”）。如果你真的必须使用这些值，我首先要创建一个对象，将正确规范化的输入值映射到复选框输入字段的值，如下所示：

var starMap = {
    '0.5': 'half',
    '1': '1',
    '1.5': '1 and a half',
    '2': '2',
    '2.5': '2 and a half',
    '3': '3',
    '3.5': '3 and a half',
    '4': '4',
    '4.5': '4 and a half',
    '5': '5'
}

然后，您可以使用它作为映射对象的键来获取与数字对应的值，这将为您提供目标值，如下所示：

var value = '4.5';
var fieldValue = starMap[value]; // result: '4 and a half'

请注意，该数字实际上需要是一个字符串，因此如果您的输入是一个数字，就像在您的示例中一样，您必须在将其用作键之前进行转换：

var value = 4.5;
var stringValue = Number(value).toString(); // result: '4.5'
var fieldValue = starMap[stringValue]; // result: '4 and a half'

那么，如果您的号码没有在映射对象中表示，例如4.4，该怎么办？好吧，你必须先把它四舍五入到下一半的整数，所以你最终会这样：

var value = 4.4;
var roundedValue = Math.round(value*2)/2; // result: 4.5
var stringValue = Number(value).toString(); // result: '4.5'
var fieldValue = starMap[stringValue]; // result: '4 and a half'

总而言之，解决问题的方法可能如下：

＆＃13;

＆＃13;

var starMap = {
    '0.5': 'half',
    '1': '1',
    '1.5': '1 and a half',
    '2': '2',
    '2.5': '2 and a half',
    '3': '3',
    '3.5': '3 and a half',
    '4': '4',
    '4.5': '4 and a half',
    '5': '5'
}

function roundToHalf(value) {
    return Math.round(value * 2) / 2;
}

function convertToString(value) {
    return Number(value).toString();
}

function setStarRating(value) {
    var fieldValue = starMap[convertToString(roundToHalf(value))];
    $("input[name=rating][value='" + fieldValue + "']").attr('checked', 'checked');
}

$(document).ready(function() {
    var value = 4.4;
    setStarRating(value);
});

＆＃13;

.rating_widgets {
    display: flex;
    margin-top: 25px;
}

.rating {
    border: none;
    float: left;
}

.rating > input {
    display: none;
}

.rating > label:before {
    margin: 5px;
    font-size: 24px;
    font-family: FontAwesome;
    display: inline-block;
    content: "\f005";
}

.rating > .half:before {
    content: "\f089";
    position: absolute;
}

.rating > label {
    color: #ddd;
    float: right;
}

.rating > input:checked ~ label,
.rating:not(:checked),
.rating:not(:checked) {
    color: #FFD700;
}

.rating > input:checked,
.rating > input:checked,
.rating > input:checked ~ label,
.rating > input:checked ~ label {
    color: #FFED85;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://use.fontawesome.com/a2e210f715.js"></script>
<div class="rating_widgets">
    <fieldset class="rating">
        <input type="radio" id="star5" name="rating" />
        <label class="full" for="star5" title="Awesome - 5 stars"></label>
        <input type="radio" id="star4half" name="rating" value="4 and a half" />
        <label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
        <input type="radio" id="star4" name="rating" value="4" />
        <label class="full" for="star4" title="Pretty good - 4 stars"></label>
        <input type="radio" id="star3half" name="rating" value="3 and a half" />
        <label class="half" for="star3half" title="Good - 3.5 stars"></label>
        <input type="radio" id="star3" name="rating" value="3" />
        <label class="full" for="star3" title="Good - 3 stars"></label>
        <input type="radio" id="star2half" name="rating" value="2 and a half" />
        <label class="half" for="star2half" title="ok - 2.5 stars"></label>
        <input type="radio" id="star2" name="rating" value="2" />
        <label class="full" for="star2" title="ok - 2 stars"></label>
        <input type="radio" id="star1half" name="rating" value="1 and a half" />
        <label class="half" for="star1half" title="Bad - 1.5 stars"></label>
        <input type="radio" id="star1" name="rating" value="1" />
        <label class="full" for="star1" title="Very bad - 1 star"></label>
        <input type="radio" id="starhalf" name="rating" value="half" />
        <label class="half" for="starhalf" title="Very bad - 0.5 stars"></label>
    </fieldset>
</div>
<!-- .rating_widget-->
<p class="figcaption">4.4 Stars-Based on 1540 Users Reviews</p>

＆＃13;

＆＃13;

＆＃13;

一些注意事项：

• 我使用了4.4而不是4.2，就像你所做的那样，证明它适用于半星（4.2舍入将是4星，这也会起作用）
• 我重构了舍入，转换为字符串，并将每个星标记为额外的函数以使代码更整洁

你也可以在这个小提琴中找到这段代码：https://jsfiddle.net/pahund/0zrooko3/