悬停时更改星级

时间：2015-06-01 08:27:32

标签： javascript jquery html css

我使用此代码显示星标：

<ul class="rating">
<li>
<span class="ratingSelector">
<input type="radio" name="ratings[1]" id="Degelijkheid-1-5" value="1" class="radio">
<label class="full" for="Degelijkheid-1-5"></label>
<input type="radio" name="ratings[1]" id="Degelijkheid-2-5" value="2" class="radio">
<label class="full" for="Degelijkheid-2-5"></label>
<input type="radio" name="ratings[1]" id="Degelijkheid-3-5" value="3" class="radio">
<label class="full" for="Degelijkheid-3-5"></label>
<input type="radio" name="ratings[1]" id="Degelijkheid-4-5" value="4" class="radio">
<label class="full" for="Degelijkheid-4-5"></label>
<input type="radio" name="ratings[1]" id="Degelijkheid-5-5" value="5" class="radio">
<label class="full" for="Degelijkheid-5-5"></label>
</span>
</li>
</ul>

动态代码：

         <ul class="rating">
            <?php foreach ($this->getRatings() as $_rating): ?>
                <li>
                    <span class="rowlabel"><?php echo $this->escapeHtml($_rating->getRatingCode()) ?></span>
                    <span class="ratingSelector">
                <?php foreach ($_rating->getOptions() as $_option): ?>
                    <input type="radio" name="ratings[<?php echo $_rating->getId() ?>]" id="<?php echo $this->escapeHtml($_rating->getRatingCode()) ?>-<?php echo $_option->getValue() ?>-5" value="<?php echo $_option->getId() ?>" class="radio" /><label class="full" for="<?php echo $this->escapeHtml($_rating->getRatingCode()) ?>-<?php echo $_option->getValue() ?>-5"></label>
                <?php endforeach; ?>
                </span>
                </li>
            <?php endforeach; ?>
        </ul>

但是悬停和选择目前从右到左工作，但我想从左到右改变它。

代码是动态加载的，因此我无法先更改排序并输入值5。这个动态代码加载5次，获得5个不同的评级。

我该怎么改变？ 或者我需要什么样的JQuery代码？

JSFiddle：https://jsfiddle.net/9nn14beq/

4 个答案:

答案 0 :(得分：6)

这可以几乎使用纯CSS。它确实需要一行JavaScript来设置初始值：

document.getElementById('Degelijkheid-1-5').checked = true;
.rating input {
    display: none;
}
.rating label:before {
    margin: 5px;
    font-size: 1.25em;
    font-family: FontAwesome;
    display: inline-block;
    content:"\f005";
}
li {
    list-style:none;
}

.ratingSelector input + label {
    color: #FFD700;
}
.ratingSelector input:checked ~ input:not(:checked) ~ label {
    color: #ddd;
}
.ratingSelector input:checked ~ input:not(:checked) + label:hover ~ label {
    color: #ddd;
}
.ratingSelector:hover input + label,
.ratingSelector:hover input:checked + label {
    color: #FFED85;
}
.ratingSelector:hover input:checked ~ input:not(:checked) ~ label:hover,
.ratingSelector:hover input:checked ~ input:not(:checked) + label {
    color: #FFD700;
}
.ratingSelector:hover input:checked ~ input:not(:checked) ~ label:hover ~ label {
    color: #ddd !important;
}
.ratingSelector input + label:hover ~ label {
    color: #ddd !important;
}
<ul class="rating">
    <li> <span class="ratingSelector">
    <input type="radio" name="ratings[1]" id="Degelijkheid-1-5" value="1" class="radio"/>
<label class="full" for="Degelijkheid-1-5"></label>
    <input type="radio" name="ratings[1]" id="Degelijkheid-2-5" value="2" class="radio"/>
<label class="full" for="Degelijkheid-2-5"></label>
    <input type="radio" name="ratings[1]" id="Degelijkheid-3-5" value="3" class="radio"/>
<label class="full" for="Degelijkheid-3-5"></label>
    <input type="radio" name="ratings[1]" id="Degelijkheid-4-5" value="4" class="radio"/>
<label class="full" for="Degelijkheid-4-5"></label>
    <input type="radio" name="ratings[1]" id="Degelijkheid-5-5" value="5" class="radio"/>
<label class="full" for="Degelijkheid-5-5"></label>
    </span>
    </li>
</ul>

修改

使用JS（重新订购商品）：

var objGroup = document.getElementsByClassName('ratingSelector');
for (var i = 0; i < objGroup.length; i++) {
  var objRadio = [].slice.call(objGroup[i].getElementsByClassName('full')); // Create an array of items
  for (var j = objRadio.length; j--;) { // Loop through the array backwards
    var checkbox = document.getElementById(objRadio[j].getAttribute('for'));
    objGroup[i].appendChild(checkbox);
    objGroup[i].appendChild(objRadio[j]);
  }
}
.rating {
  direction: rtl;
  text-align: left;
}
.rating input {
  display: none;
}
.rating label:before {
  margin: 5px;
  font-size: 1.25em;
  font-family: FontAwesome;
  display: inline-block;
  content: "\f005";
}
li {
  list-style: none;
}
.rating label {
  color: #ddd;
}
/***** CSS to Highlight Stars on Hover *****/

.ratingSelector input:checked ~ label,
/* show gold star when clicked */

.ratingSelector label:hover,
/* hover current star */

.ratingSelector label:hover ~ label {
  color: #FFD700;
}
/* hover previous stars in list */

.ratingSelector input:checked + label:hover,
/* hover current star when changing rating */

.ratingSelector input:checked ~ label:hover,
.ratingSelector label:hover ~ input:checked ~ label,
/* lighten current selection */

.ratingSelector input:checked ~ label:hover ~ label {
  color: #FFED85;
}
<ul class="rating">
  <li> <span class="ratingSelector">
    <input type="radio" name="ratings[1]" id="Degelijkheid-1-5" value="1" class="radio"/>
<label class="full" for="Degelijkheid-1-5"></label>
    <input type="radio" name="ratings[1]" id="Degelijkheid-2-5" value="2" class="radio"/>
<label class="full" for="Degelijkheid-2-5"></label>
    <input type="radio" name="ratings[1]" id="Degelijkheid-3-5" value="3" class="radio"/>
<label class="full" for="Degelijkheid-3-5"></label>
    <input type="radio" name="ratings[1]" id="Degelijkheid-4-5" value="4" class="radio"/>
<label class="full" for="Degelijkheid-4-5"></label>
    <input type="radio" name="ratings[1]" id="Degelijkheid-5-5" value="5" class="radio"/>
<label class="full" for="Degelijkheid-5-5"></label>
    </span>
  </li>
  <li> <span class="ratingSelector">
    <input type="radio" name="ratings[2]" id="Design-1-5" value="1" class="radio"/>
<label class="full" for="Design-1-5"></label>
    <input type="radio" name="ratings[2]" id="Design-2-5" value="2" class="radio"/>
<label class="full" for="Design-2-5"></label>
    <input type="radio" name="ratings[2]" id="Design-3-5" value="3" class="radio"/>
<label class="full" for="Design-3-5"></label>
    <input type="radio" name="ratings[2]" id="Design-4-5" value="4" class="radio"/>
<label class="full" for="Design-4-5"></label>
    <input type="radio" name="ratings[2]" id="Design-5-5" value="5" class="radio"/>
<label class="full" for="Design-5-5"></label>
    </span>
  </li>
  <li> <span class="ratingSelector">
    <input type="radio" name="ratings[3]" id="Gebruiksgemak-1-5" value="1" class="radio"/>
<label class="full" for="Gebruiksgemak-1-5"></label>
    <input type="radio" name="ratings[3]" id="Gebruiksgemak-2-5" value="2" class="radio"/>
<label class="full" for="Gebruiksgemak-2-5"></label>
    <input type="radio" name="ratings[3]" id="Gebruiksgemak-3-5" value="3" class="radio"/>
<label class="full" for="Gebruiksgemak-3-5"></label>
    <input type="radio" name="ratings[3]" id="Gebruiksgemak-4-5" value="4" class="radio"/>
<label class="full" for="Gebruiksgemak-4-5"></label>
    <input type="radio" name="ratings[3]" id="Gebruiksgemak-5-5" value="5" class="radio"/>
<label class="full" for="Gebruiksgemak-5-5"></label>
    </span>
  </li>
</ul>

答案 1 :(得分：0)

只有css才能实现预期。因为css规则适用于下一个兄弟而不是之前的兄弟。您还应该使用JQuery。

但你可以使用css使用以下技巧来做到这一点：

＆＃13;
＆＃13; 
.rating input { display: none; } 
.rating label:before { 
  margin: 5px;
  font-size: 1.25em;
  font-family: FontAwesome;
  display: inline-block;
  content: "\f005";
}

li {list-style:none;
direction:rtl;
text-align: left;}

.rating label { 
  color: #ddd;
}

/***** CSS to Highlight Stars on Hover *****/

.rating input:checked ~ label, /* show gold star when clicked */
.rating:not(:checked) label:hover, /* hover current star */
.rating:not(:checked) label:hover ~ label { color: #FFD700;  } /* hover previous stars in list */

.rating input:checked + label:hover, /* hover current star when changing rating */
.rating input:checked ~ label:hover,
.rating label:hover ~ input:checked ~ label, /* lighten current selection */
.rating input:checked ~ label:hover ~ label { color: #FFED85;  }
＆＃13; 
<ul class="rating">
<li>
<span class="ratingSelector">
<input type="radio" name="ratings[1]" id="Degelijkheid-5-5" value="5" class="radio">
<label class="full" for="Degelijkheid-5-5"></label>
<input type="radio" name="ratings[1]" id="Degelijkheid-4-5" value="4" class="radio">
<label class="full" for="Degelijkheid-4-5"></label>
<input type="radio" name="ratings[1]" id="Degelijkheid-3-5" value="3" class="radio">
<label class="full" for="Degelijkheid-3-5"></label>
<input type="radio" name="ratings[1]" id="Degelijkheid-2-5" value="2" class="radio">
<label class="full" for="Degelijkheid-2-5"></label>
<input type="radio" name="ratings[1]" id="Degelijkheid-1-5" value="1" class="radio">
<label class="full" for="Degelijkheid-1-5"></label>
</span>
</li>
</ul>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

如前面的答案中所述，CSS选择器仅在DOM的自然顺序中起作用。 （即使这可能在将来改变一段时间）。

因此，如果您无法更改DOM，则需要撤消CSS逻辑：

更改容器悬停时的所有元素。然后使用兄弟选择器将元素更改为悬停项目的右侧

＆＃13;
＆＃13; 
.rating input { display: none; } 
.rating label:before { 
  margin: 5px;
  font-size: 1.25em;
  font-family: FontAwesome;
  display: inline-block;
  content: "\f005";
}

li {list-style:none; }

/***** CSS to Highlight Stars on Hover *****/

.rating label {color: grey;}
label:hover { color: red;  }
.ratingSelector:hover .full {color: red; }
.full:hover ~ .full { color: grey !important;  }
＆＃13; 
<ul class="rating">
<li>
<span class="ratingSelector">
<input type="radio" name="ratings[1]" id="Degelijkheid-1-5" value="1" class="radio">
<label class="full" for="Degelijkheid-1-5"></label>
<input type="radio" name="ratings[1]" id="Degelijkheid-2-5" value="2" class="radio">
<label class="full" for="Degelijkheid-2-5"></label>
<input type="radio" name="ratings[1]" id="Degelijkheid-3-5" value="3" class="radio">
<label class="full" for="Degelijkheid-3-5"></label>
<input type="radio" name="ratings[1]" id="Degelijkheid-4-5" value="4" class="radio">
<label class="full" for="Degelijkheid-4-5"></label>
<input type="radio" name="ratings[1]" id="Degelijkheid-5-5" value="5" class="radio">
<label class="full" for="Degelijkheid-5-5"></label>
</span>
</li>
</ul>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

只需添加以下CSS代码即可从左到右：

.ratingSelector {
    max-width: 145px;
    display: inline-block;
}
.rating label {
    float: right;
}
相关问题
最新问题