Question

我正在使用codeigniter，在我的项目中，我有一个表格，我必须对产品进行评分，并且我添加了如下所示的星形按钮

<h1>
    <div class="rating" style="width:200px;float:left;padding-left:1px">
        <span id="span1" onclick="myFunction()">☆</span> 
        <span id="span2" onclick="myFunction()">☆</span> 
        <span id="span3" onclick="myFunction()">☆</span> 
        <span id="span4" onclick="myFunction()">☆</span>
        <span id="span5" onclick="myFunction()">☆</span>
    </div>
</h1>
<p id="rateText"></p>

我需要知道的是当我点击第一个按钮（id = span1）时我需要显示文本“可怕”，当点击第二个按钮时我需要显示“不满意”，当点击第三个按钮时“满意” p标签的位置。那我怎么能实现这一点请帮助我？

Answer 1

您可以尝试使用

<h1>
  <div class="rating" style="width:200px;float:left;padding-left:1px">
      <span id="span1" onclick="document.getElementById('rateText').innerHTML='My sample text1';"> ☆ </span>
      <span id="span2" onclick="document.getElementById('rateText').innerHTML='My sample text2';"> ☆ </span> 
      <span id="span3" onclick="document.getElementById('rateText').innerHTML='My sample text3';"> ☆ </span> 
      <span id="span4" onclick="document.getElementById('rateText').innerHTML='My sample text4';"> ☆ </span>
      <span id="span5" onclick="document.getElementById('rateText').innerHTML='My sample text5';"> ☆ </span>
    </div>
</h1>
<p id="rateText"></p>

Answer 2

<h1>
<div class="rating" style="width:200px;float:left;padding-left:1px">
    <span onclick="myFunction(1)">☆</span> 
    <span onclick="myFunction(2)">☆</span> 
    <span onclick="myFunction(3)">☆</span> 
    <span onclick="myFunction(4)">☆</span>
    <span onclick="myFunction(5)">☆</span>
</div>
</h1>
<p id="rateText"></p>

接下来使用js，使用param调用myFunction（PARAM）并将其附加到<p></p>

  function myFunction(stars){
        $('#rateText').append('nb stars : ' + stars);
  }

Answer 3

基本功能

Codepen Demo

标记（使用data-*属性）

<h1>
    <div class="rating" style="width:200px;float:left;padding-left:1px">
        <span data-rating="terrible">☆</span> 
        <span data-rating="unsatisfied">☆</span> 
        <span data-rating="satisfied">☆</span> 
        <span data-rating="happy">☆</span>
        <span data-rating="delighted">☆</span>
    </div>
</h1>
<p id="rateText"></p>

Vanilla JS

var rating = document.getElementsByClassName('rating')[0];
var result = document.getElementById('rateText');

rating.addEventListener('click', function(evt) {
   var elm = evt.target;
   if (elm.nodeName.toLowerCase() === 'span') {
      result.textContent = elm.dataset.rating;
   }
});

单个事件侦听器附加在包装器元素上，无需为每个span元素附加处理程序

添加简单的鼠标悬停效果

Codepen Demo

为了创建纯CSS鼠标悬停效果，我颠倒了标记中星形元素的顺序，并使用flexbox

在视觉上还原了它们的顺序

<span id="span5" data-rating="delighted">☆</span>
<span id="span4" data-rating="happy">☆</span>
<span id="span3" data-rating="satisfied">☆</span> 
<span id="span2" data-rating="unsatisfied">☆</span> 
<span id="span1" data-rating="terrible">☆</span>

黑色星标（unicode U+2605）被放置为每个::before元素的span伪元素

<强> CSS

.rating { 
   display: flex; 
   flex-flow: row-reverse; 
   justify-content: space-around; }

.rating span {
   position: relative; 
   cursor: pointer; }

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

作为最后一点，我强烈建议您使用SVG元素<use xlink:href="...">...</use>作为星标，这样您只需更改fill或stroke属性即可设置样式，如下例所示。

SVG版本

Codepen Demo

评级的标记如上所述进行了更改（注意：现在data-rating元素上定义了use属性，因此脚本也略有变化）

<span>
  <svg><use xlink:href="#star" data-rating="delighted"></use></svg>
</span>
<span>
  <svg><use xlink:href="#star" data-rating="happy"></use></svg> 
</span>
<span>
  <svg><use xlink:href="#star" data-rating="satisfied"></use></svg>
</span> 
<span>
  <svg><use xlink:href="#star" data-rating="unsatisfied"></use></svg>
</span> 
<span>
  <svg><use xlink:href="#star" data-rating="terrible"></use></svg>  
</span>

在此示例中，样式部分通过覆盖fill和stroke属性来完成

.rating use  {
    fill: #fff;
    stroke: #363636;
    stroke-width: 3px;
    transition: fill .33s, stroke-width .33s }

.rating span:hover use,
.rating span:hover ~ span use{
    stroke-width: 0;
    fill: #37393b; }

Answer 4

You can try this:

<h1>
    <div class="rating" style="width:200px;float:left;padding-left:1px">
        <span id="span1" onclick="myFunction('one')">☆</span> 
        <span id="span2" onclick="myFunction('two')">☆</span> 
        <span id="span3" onclick="myFunction('three')">☆</span> 
        <span id="span4" onclick="myFunction('four')">☆</span>
        <span id="span5" onclick="myFunction('five')">☆</span>
    </div>
</h1>
<p id="rateText"></p>

据我所知，你必须显示用户点击了哪个按钮，所以我已经将参数传递给了一，二，三......

您可以添加文字来代替，

你必须添加如下的脚本标记和jquery文件：

<script type="text/javascript" src="jquery.js"></script>

<script>
         function myFunction(desc){
             $('#rateText').text(desc);
         } 
</script>

Answer 5

function myFunction(rating) {
  document.getElementById("rateText").innerHTML = rating;
}

<h1>
    <div class="rating" style="width:200px;float:left;padding-left:1px">
        <span id="span1" onclick="myFunction('Terrible')">☆</span> 
        <span id="span2" onclick="myFunction('Unsatisfied')">☆</span> 
        <span id="span3" onclick="myFunction('Satisfied')">☆</span> 
        <span id="span4" onclick="myFunction('Very Satisfied')">☆</span>
        <span id="span5" onclick="myFunction('Awesome')">☆</span>
    </div>
</h1>
<p id="rateText"></p>

如何在单击按钮时显示文本（按钮被<span> </span>标记包围）

5 个答案:

基本功能

添加简单的鼠标悬停效果

SVG版本