我如何永久設置內容之前使用jQuery

Question

我用

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

在此處顯示以顯示評級欄。 我想知道如何使用javascript永久設置它。 我嘗試了類似的東西

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

但這顯然是行不通的，它只會影響被點擊的元素，而不是之前的元素集。 它是如何做到的？ 謝謝

Answer 1

請嘗試以下方法：

 $( ".rateThis span" ).click(function() { $('.rateThis').before().append('<i class="fa fa-star"></i>'); }); 

 span { cursor: pointer; } 

 <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> 

注意：這僅是示例，請根據需要進行研究和調整。

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>