更改一個按鈕的狀態HTML

-1

我在我的HTML正文中有這樣的代碼，它充當一個顯示/隱藏按鈕，它通過CSS進行了樣式化。不過，我只能選擇標題按鈕一次，即「閱讀更多..」，但在選擇按鈕後，我希望它更改爲「更少閱讀」。以下是我正在使用的代碼：更改一個按鈕的狀態HTML

<button title="Click to show/hide content" type="button" 
    onclick="if(document.getElementById('spoiler') .style.display=='none')   
    {document.getElementById('spoiler') 
    .style.display=''}else{document.getElementById('spoiler') 
    .style.display='none'}">Read more... 
</button>

任何幫助將不勝感激，謝謝提前

來源

2014-03-19 user3437161

你的代碼在哪裏..？ – shubhraj

你試圖顯示和隱藏每次點擊一個按鈕？ – Abhishek

哇，你應該把這個JavaScript裏面的函數，而不是直接在onclick事件。 – FabioG

嘗試：

HTML：

<button title="Click to show/hide content" type="button" onclick="func()" id="but">Read more...</button> 
<div id="spoiler" style="display:none">TEXT TEXT TEXT</div>

JS：

function func(){ 

      if(document.getElementById('spoiler') .style.display=="none"){ 
      document.getElementById('spoiler').style.display="block"; 
      document.getElementById('but').innerHTML="Read less..."; 
      } 
      else{ 
      document.getElementById('spoiler').style.display='none'; 
      document.getElementById('but').innerHTML="Read more..."; 
      } 
      }

DEMO

來源

2014-03-19 10:56:58 laaposto

首先，走出內嵌捆綁JavaScript作爲HTML屬性的習慣。從你的JS腳本中集中查看DOM腳本，而不是在你的HTML中。

你需要做的事情的本質是在每次點擊按鈕時查詢一些東西，並相應地採取行動。例如，擾流區域的可見性。

（請注意，你需要給你的按鈕的ID，例如mybutton，這個:)

document.querySelector('#mybutton').addEventListener('click', function() { 
    var 
    spoiler = document.querySelector('#spoiler'), 
    showing = spoiler.style.display != 'none'; 
    spoiler.style.display = showing ? 'none' : 'block'; 
    this.textContent = 'Read '+(showing ? 'more' : 'less'); 
}, false);

於是就點擊，我們詢問display風格#spoiler。如果它正在顯示，我們會隱藏它，如果它隱藏，我們會顯示它，並相應地更新按鈕文本。

來源

2014-03-19 10:59:20 Utkanos

你錯過了一個加號（'+'）：''Read'+（顯示？'more'：'less'）'，很好的答案。 –

謝謝，和好的地方。編輯。 – Utkanos

HTML：

<button id="btn" title="Click to show/hide content" type="button" onclick="readmore()">Read More...</button> 
<div id="spoiler" style="display:none">spoiler text</div>

JS：

function readmore(){ 
    var btn = document.getElementById('btn'); 
    var spoiler = document.getElementById('spoiler'); 

    if(spoiler.style.display=='none') { 
     spoiler.style.display = ''; 
     btn.innerHTML = "Read Less ..."; 
    } else { 
     spoiler.style.display = 'none'; 
     btn.innerHTML = "Read More ..."; 
    } 
}

這裏是一個DEMO at jsFiddle。

來源

2014-03-19 11:01:29

更改一個按鈕的狀態HTML

回答

相關問題