Question

我要在单击“更少” /“更多”之后在“更多”和“更少”旁边显示一个图标。

如何像这样制作多个按钮/ 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>

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

Answer 2

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

HTML5 Web Storage

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

Answer 3

您可以执行以下操作。...

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

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

如何在按钮上显示/隐藏文本旁边显示图标？

3 个答案: