通過點擊鏈接顯示長文本的隱藏部分

我在我的網站上有一個評論框，有10條評論。我想縮短「每個」，然後放置一個「閱讀更多」鏈接。當人們點擊每個鏈接時，它會爲該特定評論發現更多文本。這是互聯網上非常普遍的概念。我不在乎文本是否可以再次隱藏，就像它可以顯示的一樣。我知道每個隱藏的評論都需要一個單獨的ID。我有打開一個評論的代碼，但當然當你點擊下一個評論時什麼也沒有發生。所以，我需要從上到下的全部JavaScript代碼，它們會在點擊時單獨打開每個評論。我不熟悉JavaScript編碼，因此非常感謝任何幫助。通過點擊鏈接顯示長文本的隱藏部分

下面是似乎適用於一個評論的代碼：如果您可以改進它，那很好，但我真的需要添加它以便所有其他ID的工作。我有「顯示」作爲我的可點擊鏈接的ID，「內容」是隱藏文本的ID。我在想，其他ID的也只是遵循「show2，show3，等等」，然後‘內容2，content3等’

function showHideP(Id) { 
    var obj = document.getElementById('content'); 
    if (obj) { 
     obj.style.display = 'block'; 
    } 
    var obj = document.getElementById('show'); 
    if (obj) { 
     obj.style.display = 'none'; 
    } 
}

來源

2015-10-21 nairb00

你可以發佈你的HTML以及甚至更好地創建一個[jsfiddle]（https://jsfiddle.net）？ – arcyqwerty

從你的代碼的外觀來看，你根本沒有使用'Id'參數。你總是選擇'id =「content」'和'id =「show」'。也許如果你的元素是'

...

'，那麼你會想'getElementById（'content'+ Id）;'？ – arcyqwerty

你不需要id的。你需要的是發送元素使用onclick="myFunction(this)"的onclick函數，使用參數this（被點擊的元素），可以使用element.nextElementSibling.style.display = 'block顯示「更多內容」（取決於頁面的結構，您可能需要使用不同的方式遍歷DOM找到你想要顯示的元素）

function showReadMore(element) { 
 
    element.nextElementSibling.style.display = 'block'; 
 
    element.style.display = 'none'; 
 
}

.moreContent { 
 
    display:none; 
 
}

<div class="reivewSection"> 
 
    <div class="review"> 
 
     Review 1 
 
     <a class="readmore" onclick="showReadMore(this)" href="#">Read More...</a>   
 
     <div class="moreContent"> 
 
      This is more Content for Review 1 
 
     </div> 
 
    </div> 
 
    <br/> 
 
    <div class="review"> 
 
     Review 2 
 
     <a class="readmore" onclick="showReadMore(this)" href="#">Read More...</a> 
 
     <div class="moreContent"> 
 
      This is more Content for Review 2 
 
     </div> 
 
    </div> 
 
    <br/> 
 
    <div class="review"> 
 
     Review 3 
 
     <a class="readmore" onclick="showReadMore(this)" href="#">Read More...</a> 
 
     <div class="moreContent"> 
 
      This is more Content for Review 3 
 
     </div> 
 
    </div> 
 
    <br/> 
 
    <div class="review"> 
 
     Review 4 
 
     <a class="readmore" onclick="showReadMore(this)" href="#">Read More...</a> 
 
     <div class="moreContent"> 
 
      This is more Content for Review 4 
 
     </div> 
 
    </div> 
 
    <br/>  
 
</div>

來源

2015-10-21 20:49:12 indubitablee

好吧，這似乎工作......兩件事情......「這個」需要替換一些東西，還是保持原樣？而且，有沒有辦法點擊「閱讀更多內容」，並在其他內容取代它時讓「閱讀更多」消失？非常感謝... – nairb00

'這個'應該保持原樣。它意味着「將此元素作爲參數發送給函數」，以便函數不必查找由id或類單擊的元素。是的隱藏「閱讀更多」。你需要在你的函數中添加'element.style.display ='none';'（我上面編輯過，所以你可以看看） – indubitablee

非常感謝你的這個解決方案工作得非常好。我確實需要添加一個「返回false」;在onclick部分，所以頁面不會跳轉到頂部。所有的評論現在打開很好。我爲每個div部分添加了一些css，並且它對齊並且看起來不錯。好主意......再次感謝！ – nairb00

這裏有些類似於你想要的東西。爲此，在下面的示例中，我在所有「readmore」錨標記上添加了一個「view-detail」類，確保readmore鏈接分配有獨特的href鏈接（具有完整內容的div的id），例如，第一個readmore href的鏈接將是href =「show1」，第二個元素的href將是「show2」等等。這些相同的hrefs也應該作爲ID分配給所有內容div。例如，第一個內容div id將是「show1」，如此一個。通過這種方式，您可以使用「this」關鍵字在鼠標點擊時顯示內容。下面是一個用於在Jquery UI彈出窗口中顯示單擊元素內容的jquery片段，您可以忽略對話框代碼&用display：block，display：none替換爲您的需要。：

$(document).on("click", "a.view-detail", function() { 
      var hrefId= $(this).attr('href'); 
      //console.log(hrefId); 

      $("#dialog-message").html($(hrefId).html()); 

     $("#dialog-message").dialog({ 
      modal: true, 
      buttons: { 
      Ok: function() { 
       $(this).dialog("close"); 
      } 
      } 
     }); 

      //$(hrefId).toggle(); 
     });

來源

2015-10-21 20:55:13 zeppelin

通過點擊鏈接顯示長文本的隱藏部分

回答

相關問題