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

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，使用参数调用 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>

原版 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）被放置为每个span元素的::before伪元素

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>