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

how to show a text when a button is clicked(button is surrounded by <span></span> tag)

本文关键字：lt 按钮 span gt 包围 单击 显示 文本      更新时间：2023-12-05

我正在使用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标签所在的位置显示"满意"。那么我该如何做到这一点呢？请帮帮我？

您可以尝试使用

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

<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);
  }

基本功能

Codepen演示

标记（使用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演示

为了创建一个纯粹的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演示

评级的标记如上所述进行了更改（注意：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; }

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>

据我所知，你必须显示用户点击了哪个按钮，所以我把parameter传递给了一、二、三。。。

代替它，你可以添加你的文本。

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

<script type="text/javascript" src="jquery.js"></script>
<script>
         function myFunction(desc){
             $('#rateText').text(desc);
         } 
</script>


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>

相关文章：