jQuery在點擊時切換HTML

當我點擊HTML更改按鈕時，但是當我再次點擊時，滑動切換會觸發，但是我想把HTML作爲Show Me放回去。jQuery在點擊時切換HTML

<div id="show">Show Me</div> 
<div id="visible">Hello, My name is John.</div> 

$(document).ready(function(){ 
    $("#show").click(function(){ 
     $('#visible').slideToggle(); 
     $('#show').html('Hide me'); 
    }); 
})

http://jsfiddle.net/u2p48/13/

任何想法如何做呢？

謝謝

來源

2013-03-01 John Mersal

可以使用條件操作? :到文本之間切換。

Live Demo

$(document).ready(function(){ 
    $("#show").click(function(){ 
     $('#visible').slideToggle();    
     $('#show').html($('#show').text() == 'Hide me' ? 'Show Me' : 'Hide me'); 
    }); 
})

來源

2013-03-01 09:13:26 Adil

嗯，這是相當快:)這奏效了使用數據屬性:)謝謝你這麼多:) – 2013-03-01 09:14:45

歡迎您... – Adil 2013-03-01 09:15:22

你需要傳遞'Show me'或'Hide me'到.html，這取決於你正在顯示或隱藏。一種方法是滑動之前檢查的#visible知名度：

var on = $('#visible').is(':visible');

，因此：

$('#show').html(on ? 'Show me' : 'Hide me');

Demo

來源

2013-03-01 09:13:48

謝謝你:)做了訣竅2 :) – 2013-03-01 09:17:54

看看這個解決方案也：

$("#show").click(function(){ 
    if ($('#visible').hasClass('visible')) { 
     $('#visible').slideDown().removeClass('visible'); 
     $('#show').html('Hide me'); 
    } else { 
     $('#visible').slideUp().addClass('visible'); 
     $('#show').html('Show Me'); 
    }  
});

http://jsfiddle.net/xkyf2/1/

來源

2013-03-01 09:18:23

我第一次做到了這一點，但我不想添加課程並刪除課程。我喜歡在HTML文本之間切換的最佳方式，因爲我沒有使用它的經驗，但現在我明白它是如何工作的:) – 2013-03-01 09:20:55

我更喜歡使用slideUp和slideDown而不是slideToggle，因爲這樣可以確保它在下滑時滑落文字就變成了「隱藏我」，反之亦然。 Slidetoggle不太清楚，因爲只是通過查看代碼，你不能說出會發生什麼，它取決於實際狀態，它可能會造成混淆。 – 2013-03-01 09:26:44

在HTML

\t $('button').on('click', function(){ 
 
\t \t var that = $('button'); 
 
\t \t if(that.text() == that.data("text-swap")){ 
 
\t \t \t that.text(that.data("text-original")); 
 
\t \t } else { 
 
\t \t \t that.data("text-original", that.text()); 
 
\t \t that.text(that.data("text-swap")); 
 
\t \t } \t 
 
\t });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<button data-text-swap="Replace Text" data-text-original="Original Text">Original Text</button>

來源

2016-03-10 18:51:07 ardev

jQuery在點擊時切換HTML

回答

相關問題