Question

我用

.rating > span:hover:before,
.rating > span:hover ~ span:before {
   content: "\2605";
   position: absolute;
}

显示here以显示评级栏。我想知道如何使用javascript永久设置它。我试过像

这样的东西

  $( ".rating span" ).click(function() {
    $(this).html('\2605');
  });

但这显然不起作用，它只影响被点击的元素，而不是之前的元素集。它是怎么做到的？感谢

Answer 1

尝试以下方法：

＆＃13;

span {
  cursor: pointer;
  }

＆＃13;

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<div class="rateThis">

<span>click here</span>

</div>

＆＃13;

package  {

public class RandomText  {


    public function RandomText() {
        var randomKill:Array = new Array("Goats",
                      "Bananas",
                      "Cows",
                      "a Printer",
                      "Pineapples",
                      "a Toothbrush")


    }

}

＆＃13;

注意：这只是一个例子，根据需要进行研究和调整。

Answer 2

您可以创建一个没有pseduo的类：hover：并将该类应用于您的元素。

Answer 3

你可以随时

$( ".rating span" ).trigger("click");

它将立即执行触发..：）

Answer 4

终于开始工作了。感谢大家的答案。这是我使用的最终代码

$( ".rating span" ).click(function() {
  var ratingBar = $(this).parent().attr('id');
  $('#' + ratingBar + ' span').text('☆');
  $(this).text('★');
  $(this).nextAll().text('★');
});

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

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<span class="rating" for="Food" id="0">
  <span>☆</span><span>☆</span><span>☆</span><span>☆</span><span>☆</span>
</span>

如何使用jquery永久设置内容

4 个答案: