單擊時更改HTML

我在這個“閱讀更多”按鈕上的問題是，當我通過點擊 #test_001 或 #test_002 關閉它時，“閱讀更多”按鈕保持打開狀態：“閱讀更少”我該如何更改？

$("#readmore_01").click(function(e){
     e.preventDefault();
    $("#test_001").toggle("fast");
    window.scrollTo(170, 170);
    let name = $(this).html();
    $(this).html("Read less");
    if(name == "Read less"){
        $(this).html("Read more");
    }

 });

$("#readmore_02").click(function(e){
     e.preventDefault();
    $("#test_002").toggle("fast");
    window.scrollTo(550, 550);
    let name = $(this).html();
    $(this).html("Read less");
    if(name == "Read less"){
        $(this).html("Read more");
    }

 });

$("#test_001").click(function(e){
     e.preventDefault();
    $("#test_001").toggle("fast");
    window.scrollTo(170, 170);


 });

$("#test_002").click(function(e){
     e.preventDefault();
    $("#test_002").toggle("fast");
    window.scrollTo(550, 550);

 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="content_01">
    <div>Hi guys that's a test</div>
    <p id="test_001" style="display:none">Test</p>
    <div class="toggleBtn_01">
         <i class="fa fa-plus" id="readmore_01">Read more</i>
    </div>
</div>
<div class="content_02">
    <div>Hi guys that's a test</div>
    <p id="test_002" style="display:none">Test</p>
    <div class="toggleBtn_02">
    <i class="fa fa-plus" id="readmore_02">Read more</i>
    </div>
</div>

uj5u.com熱心網友回復：

您的問題出在 test_00# 函式呼叫中。

當您單擊測驗文本時，它會呼叫 test_00# 函式，這些函式沒有更新閱讀更多/更少按鈕的邏輯。

在您的 test_00# 函式中添加以下行以在單擊“測驗”文本時進行更新。

document.getElementById("readmore_01").innerHTML = "Read more"

$("#readmore_01").click(function(e){
     e.preventDefault();
    $("#test_001").toggle("fast");
    window.scrollTo(170, 170);
    let name = $(this).html();
    $(this).html("Read less");
    if(name == "Read less"){
        $(this).html("Read more");
    }

 });

$("#readmore_02").click(function(e){
     e.preventDefault();
    $("#test_002").toggle("fast");
    window.scrollTo(550, 550);
    let name = $(this).html();
    $(this).html("Read less");
    if(name == "Read less"){
        $(this).html("Read more");
    }

 });

$("#test_001").click(function(e){
     e.preventDefault();
    $("#test_001").toggle("fast");
    window.scrollTo(170, 170);
    
    document.getElementById("readmore_01").innerHTML = "Read more"
 });

$("#test_002").click(function(e){
     e.preventDefault();
    $("#test_002").toggle("fast");
    window.scrollTo(550, 550);

    document.getElementById("readmore_02").innerHTML = "Read more"
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="content_01">
    <div>Hi guys that's a test</div>
    <p id="test_001" style="display:none">Test</p>
    <div class="toggleBtn_01">
         <i class="fa fa-plus" id="readmore_01">Read more</i>
    </div>
</div>
<div class="content_02">
    <div>Hi guys that's a test</div>
    <p id="test_002" style="display:none">Test</p>
    <div class="toggleBtn_02">
    <i class="fa fa-plus" id="readmore_02">Read more</i>
    </div>
</div>

uj5u.com熱心網友回復：

這些函式可以抽象一點，因此您只需要一個函式來切換此行為。

首先，我們可以將Read more和定義Read less為常量以獲得更好的可重用性（即不太容易出現拼寫錯誤，并且如果您需要更新文本，您只需要更新這個常量值而不是更新多個函式中的字串值）。

const READ_MORE = 'Read more';
const READ_LESS = 'Read less';

然后我們可以將這個點擊處理程式添加到p，div.toggleBtn_0x所以點擊它們中的任何一個都會運行這個函式。

.content_01 p,
.content_01 div.toggleBtn_01,
.content_02 p,
.content_02 div.toggleBtn_02

進入函式后，我們可以通過轉到父節點，然后找到相關節點來獲取要切換的i和p元素。

let button = $(this).parent().find('i');
let text = $(this).parent().find('p');

我省略了這個scrollTo功能，因為不清楚它在這個片段中是如何作業的（可能是因為示例文本很短），但是按照Scroll to an element with jQuery 中的描述，再次實作它應該是相當直接的。

完整示例：

const READ_MORE = 'Read more';
const READ_LESS = 'Read less';

$('.content_01 p, .content_01 div.toggleBtn_01, .content_02 p, .content_02 div.toggleBtn_02').on('click', function(e) {
  e.preventDefault();

  let button = $(this).parent().find('i');
  let text = $(this).parent().find('p');

  text.toggle('fast');

  if (button.html() == READ_LESS) {
    button.html(READ_MORE);
  } else {
    button.html(READ_LESS);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="content_01">
  <div>Hi guys that's a test</div>
  <p id="test_001" style="display:none">Test</p>
  <div class="toggleBtn_01">
    <i class="fa fa-plus" id="readmore_01">Read more</i>
  </div>
</div>
<div class="content_02">
  <div>Hi guys that's a test</div>
  <p id="test_002" style="display:none">Test</p>
  <div class="toggleBtn_02">
    <i class="fa fa-plus" id="readmore_02">Read more</i>
  </div>
</div>

標籤：javascript html

上一篇：如何在Vue中的函式之間共享變數

下一篇：在塊中集成欄位