如何在按钮上显示/隐藏文本旁边显示图标？ [关闭]答案

【问题标题】：How to display icon next to show/hide text on button? [closed]如何在按钮上显示/隐藏文本旁边显示图标？ [关闭]
【发布时间】：2019-11-22 03:14:03
【问题描述】：

点击less/more后，我想在“more”和“less”旁边显示一个图标。

如何制作这样的多个按钮/ID？基于检查的解决方案。 ——

function showme(id) {
  var divid = document.getElementById(id);
  var clicky = document.getElementById("clicky");
  if (divid.style.display == 'block') {
    divid.style.display = 'none';
    clicky.innerHTML = "MORE";
  } else {
    divid.style.display = 'block';
    clicky.innerHTML = "LESS";
  }
}

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
  <i>Click on more. I want to have two different icons one for more one for less always after click.</i><br>

  <div class="tp-caption rev-btn rev-hiddenicon  rs-hover-ready rev-mre-btn" onclick="showme('widget');" href="javascript:;" id="clicky">MORE <i class="fa fa-car"></i></div>


  <div id="widget" style="display:none;">
    This is a widget
  </div>


</body>

</html>

【问题讨论】：

标签： javascript html button show-hide iconbutton

【解决方案1】：

function showme(id) {
  var car = document.createElement('i');
  car.classList.add("fa");
  
  var divid = document.getElementById(id);
  var clicky = document.getElementById("clicky");
  if (divid.style.display == 'block') {
    divid.style.display = 'none';
    clicky.innerHTML = "MORE";
    car.classList.add("fa-arrow-down");
  } else {
    divid.style.display = 'block';
    clicky.innerHTML = "LESS";
    car.classList.add("fa-arrow-up");
  }
  clicky.appendChild(car);
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<i>Click on more. I want to have two different icons one for more one for less always after click.</i><br>

<div class="tp-caption rev-btn rev-hiddenicon  rs-hover-ready rev-mre-btn" onclick="showme('widget');" href="javascript:;" id="clicky">MORE <i class="fa fa-car"></i></div>


<div id="widget" style="display:none;">
  This is a widget
</div>

【讨论】：

但是如何让显示两个不同的图标呢？例如更多（向下箭头）和更少（向上箭头）？

【解决方案2】：

你可以这样做......

function showme(id) {
  var divid = document.getElementById(id);
  var clicky = document.getElementById("clicky");
  if (divid.style.display == 'block') {
    divid.style.display = 'none';
    clicky.innerHTML = "MORE <i class='fa fa-arrow-down'></i>";
  } else {
    divid.style.display = 'block';
    clicky.innerHTML = "LESS <i class='fa fa-arrow-up'></i>";
  }
}

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
  <i>Click on more. I want to have two different icons one for more one for less always after click.</i><br>

  <div class="tp-caption rev-btn rev-hiddenicon  rs-hover-ready rev-mre-btn" onclick="showme('widget');" href="javascript:;" id="clicky">MORE <i class="fa fa-car"></i></div>


  <div id="widget" style="display:none;">
    This is a widget
  </div>


</body>

</html>

【讨论】：

是的！干得好！

【解决方案3】：

请更改您的 JS 代码，如下所示：-

function showme(id) {
  var divid = document.getElementById(id);
  var clicky = document.getElementById("clicky");
  if (divid.style.display == 'block') {
    divid.style.display = 'none';
    clicky.innerHTML = 'MORE <i class="fa fa-car"></i>';
  } else {
    divid.style.display = 'block';
    clicky.innerHTML = 'LESS <i class="fa fa-car"></i>';
  }
}

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
  <i>Click on more. I want to have two different icons one for more one for less always after click.</i><br>

  <div class="tp-caption rev-btn rev-hiddenicon  rs-hover-ready rev-mre-btn" onclick="showme('widget');" href="javascript:;" id="clicky">MORE <i class="fa fa-car"></i></div>


  <div id="widget" style="display:none;">
    This is a widget
  </div>
</body>

【讨论】：