jQuery切換div和文本

我想了解一些關於此代碼的幫助，我已經閱讀過類似的問題&這裏是對stackoverflow的回答，但我仍然無法正確理解。jQuery切換div和文本

我有一個由html的（「」）填充的鏈接來閱讀more…

當點擊它會打開隱藏的DIV，並在年底的的.html（「」）讀less...

當我點擊關閉，div滑動關閉，但文本仍然讀取less...

我已經閱讀了很多關於如何做到這一點的文章，但我很困惑，無法渡過這最後一道障礙，任何幫助將不勝感激。

//這是介紹DIV

<div id="" class=""> 
    <p> 
     Ligula suspendisse nulla pretium, rhoncus tempor placerat fermentum, enim 
     integer ad vestibulum volutpat. Nisl rhoncus turpis est, vel elit, congue 
     wisi enim nunc ultricies sit, magna tincidunt. Maecenas aliquam maecenas 
     ligula nostra, accumsan taciti. 
    </p> 
</div>

//這下DIV是隱藏

<div class="overview-continued"> 
    <p> 
     Ligula suspendisse nulla pretium, rhoncus tempor placerat fermentum, enim 
     integer ad vestibulum volutpat. Nisl rhoncus turpis est, vel elit, congue 
     wisi enim nunc ultricies sit, magna tincidunt. Maecenas aliquam maecenas 
     ligula nostra, accumsan taciti. 
    </p> 
</div> 

<a class="show-overview" href="#"><h4></h4></a> 

$(document).ready(function() { 
    $(".overview-continued").hide(); 
    $(".show-overview").html("more..."); 
    $(".show-overview").click(function() { 
     $(".overview-continued").slideToggle("1000"); 
     $(".show-overview").html("less..."); 
     return false; 
    }); 
});

來源

2012-06-12 Jack

任何機會，你可以對這個問題的jsfiddle.net提供一個例子嗎？ – hafichuk

你永遠只能將其設置爲less..。如果當前值爲less...，則還需要對其進行評估並將其設置回more...。

見DEMO: Comparing HTML

$(document).ready(function() { 
    $(".overview-continued").hide(); 
    $(".show-overview").html("more..."); 
    $(".show-overview").click(function() { 
     var text = $(this).html(); 
     $(".overview-continued").slideToggle("1000"); 
     $(".show-overview").html(text == "less..." ? "more..." : "less..."); 
     return false; 
    }); 
});

編輯
freakish在評論中提到，比較HTMLS是不好的做法。
（也更新樣品使用如由OP指定的文本和標籤。）

爲此，請參見替代DEMO: Using Attributes

的anchor接收到新的自定義屬性：

<a class="show-overview" data-item-state="showLess">...</a>

腳本被更新並有一點重新考慮：

$(document).ready(function() { 
    $(".overview-continued").hide(); 

    setState(); 

    $(".show-overview").click(function() { 
     $(".overview-continued").slideToggle("1000"); 
     setState(); 
     return false; 
    }); 

    function setState() { 
     var control = $(".show-overview"); 
     var state = control.attr("data-item-state"); 

     control.html(state == "showLess" ? "more..." : "less..."); 
     control.attr("data-item-state", state == "showLess" ? "showMore" : "showLess"); 
    }; 
});

來源

2012-06-12 22:04:58 Nope

確實有效，但比較HTML？這是不好的做法。 – freakish

@freakish：感謝您的評論。我用最簡單的解決方案開始，OP可以重新考慮我的猜測。但是，我添加了一個比較HTML的替代方法。這應該讓OP開始朝着正確的方向發展。 OP要記住的主要原因是，如果您想在狀態或值之間切換，則需要每次評估並相應地進行設置。 – Nope

謝謝你們，我非常感謝你們的幫助。 – Jack

你需要在你的條件點擊功能，因爲你總是設置.show-概述「少......」

未必是正確的語法，但：

$(".show-overview").click(function() 

    { 
     $(".overview-continued").slideToggle("1000"); 
     if($(".show-overview").html() == "less...") 
     { 
     $(".show-overview").html("more..."); 
     } 
     else 
     { 
     $(".show-overview").html("less..."); 
     } 
     return false; 

    });

來源

2012-06-12 22:05:13 RedEyedMonster

然而，弗朗索瓦顯示了一個更優雅的答案。 – RedEyedMonster

您需要時div打開要知道從JavaScript /關閉觀點看法。試試這個：

$(document).ready(function() { 
    var overview = $(".overview-continued"); 
    overview.hide(); 
    var show = $(".show-overview"); 
    show.html("more..."); 
    show.click(function(e) { 
     e.preventDefault(); 
     var is_opened = overview.data('is_opened'); 
     if (!is_opened) { 
      overview.slideDown(500, function() { 
       show.html("less..."); 
      }); 
     } else { 
      overview.slideUp(500, function() { 
       show.html("more..."); 
      }); 
     } 
     overview.data('is_opened', !is_opened); 
    }); 
});

檢查這個jsFiddle的代碼。請注意，我重構了一下你的代碼。

來源

2012-06-12 22:05:44 freakish

爲什麼-1？謹慎評論？ – freakish

不確定-1。由於某種原因，似乎某人在開始時低估了所有答案。無論如何，因爲它是一個工作解決方案。 – Nope

非常感謝，這是我學習的很好的代碼，在jsfiddle中完美工作，但由於某種原因，它不適用於我在xampp或我的現場網站。我將不得不看看是否有某種衝突，但它是一個開發小型站點，所以代碼不多。 PS我不能+1，因爲我還沒有被允許，但是當我可以的時候我會的。 – Jack

你正在點擊函數中用「.less」來標記它。它會使它更容易理解，如果你用兩種方法分割它... 東西沿着這些線路：

$(document).ready(function() { 
    function close(){ 
     $(".overview-continued").slideToggle("1000"); 
     $(".show-overview").html("more..."); 
    } 
    function open(){ 
     $(".overview-continued").slideToggle("1000"); 
     $(".show-overview").html("less..."); 
    } 
    $(".overview-continued").hide(); 
    $(".show-overview").toggle(open,close); 
});

編輯：由於意見

來源

2012-06-12 22:09:00 mindandmedia

如果沒有'unbind'，這會在你每次點擊滑動切換多次（和html交換）時添加處理程序。 – freakish

jQuery切換div和文本

回答

相關問題