1

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

如何像这样制作多个按钮/ id？基于检查的解决方案。——</p> 

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>

4

3 回答 3

1

请更改您的 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>

于 2019-07-12T11:00:47.290 回答
1

你可以做这样的事情......

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>

于 2019-07-12T11:00:50.037 回答
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>

于 2019-07-12T10:59:41.780 回答