星級評價是從後面得到星星填充

我有這個代碼在基於默認值的地方，它填滿了星星。例如，如果數字是3，它會填滿我3星，但jquery填滿它的方式，它使我頭兩個星星空了，它讓我填滿了其他三個星星。我有演示here。另外，如果數字是小數點，我該如何填寫半星？星級評價是從後面得到星星填充

HTML代碼：

<p class="rating" data-default-value="2"> 
<!-- data-default-value="@rev.Rating" --> 
<span data-value="5" class="fa fa-star"></span> 
<span data-value="4" class="fa fa-star"></span> 
<span data-value="3" class="fa fa-star"></span> 
<span data-value="2" class="fa fa-star"></span> 
<span data-value="1" class="fa fa-star"></span> 
</p>

和CSS：

.rated { 
border: 1px solid red; 
} 

.half { 
border: 1px solid blue; 
}

和jQuery：

jQuery(function($) { 
    $('.rating').each(function() { 
    $(this).find('span').slice(-$(this).data('defaultvalue') 
    ).addClass("rated"); 
    }); 
})

來源

2017-10-13 Guillermo Vargas

是問題，這是在相反的順序填充明星？ –

只需檢查['.slice（）']（https://api.jquery.com/slice/） – Andreas

的文檔是的，我試圖改變jquery，但似乎沒有任何工作，也不能得到半星工作要麼 –

不使用片（我認爲這是更易於閱讀）

jQuery(function($) { 
 
    var count = $('.rating').data('defaultValue'); 
 

 
    for(var i = 1; i <= count; i++) 
 
    { 
 
    $('.rating > span[data-value=' + i + ']').addClass("rated"); 
 
    } 
 
})

.rated { 
 
border: 1px solid red; 
 
} 
 

 
.half { 
 
border: 1px solid blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<p class="rating" data-default-value="2"> 
 
<!-- data-default-value="@rev.Rating" --> 
 
<span data-value="1" class="fa fa-star">1</span> 
 
<span data-value="2" class="fa fa-star">2</span> 
 
<span data-value="3" class="fa fa-star">3</span> 
 
<span data-value="4" class="fa fa-star">4</span> 
 
<span data-value="5" class="fa fa-star">5</span> 
 
</p>

，如果你真的想使用slice你能做到這樣：你需要切「0之間的X」的陣列。如果您使用單個參數調用，則只會獲得切片數組的結束部分。有關.slice()方法的更多信息，請參閱the documentation。

jQuery(function($) { 
 
     var count = $('.rating').data('defaultValue'); 
 

 
     $('.rating > span').slice(0, count).addClass("rated") 
 
     
 
    })

.rated { 
 
    border: 1px solid red; 
 
    } 
 

 
    .half { 
 
    border: 1px solid blue; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
    <p class="rating" data-default-value="2"> 
 
    <!-- data-default-value="@rev.Rating" --> 
 
    <span data-value="1" class="fa fa-star">1</span> 
 
    <span data-value="2" class="fa fa-star">2</span> 
 
    <span data-value="3" class="fa fa-star">3</span> 
 
    <span data-value="4" class="fa fa-star">4</span> 
 
    <span data-value="5" class="fa fa-star">5</span> 
 
    </p>

來源

2017-10-13 15:43:35 Wndrr

星級評價是從後面得到星星填充

回答

相關問題