使用jQuery更改文本和圖標

當您單擊「隱藏信息」時，我想將文本從「隱藏信息」更改爲「顯示信息」，並更改圖標：https://cdn4.iconfinder.com/data/icons/seo-and-data/500/view-content-window-16.png。使用jQuery更改文本和圖標

當文本再次被點擊時，它應該從「顯示信息」更改爲「隱藏信息」。

請記住，當您顯示信息時，應顯示文本「teststests」。如果你想隱藏「teststests」你點擊「隱藏信息」。

我不知道該怎麼做。

謝謝！

$(document).ready(function(){ 
 
    $("div#test").click(function(){ 
 
     $("#test2").toggle(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div id="test2" style="display:none"> 
 
teststests 
 
</div> 
 

 
<div id="test"> 
 
<img src="https://cdn0.iconfinder.com/data/icons/octicons/1024/eye-16.png" /> Show Information 
 
</div>

來源

2015-08-17 What' sUP

檢查我的帖子，我已經包含了可以防止div在淡入淡出時重疊的CSS並出去。這也適用於Amit答案中的'.fadeToggle（）'。我無法將CSS添加到我的小提琴中，因爲我剛發佈了此評論並在我的手機上進行了編輯，出於某種原因，它不會讓我在那裏定位CSS字段。你可以複製並粘貼它，它會正常工作。希望這有助於。 –

檢查這個fiddle

代碼

$(document).ready(function(){ 
    $("div#test,div#test2").click(function(){   
     $("div#test,div#test2").toggle(); 
    }); 
});

HTML

<div id="test"> 
<img src="https://cdn0.iconfinder.com/data/icons/octicons/1024/eye-16.png" /> Show Information 
</div> 

<div id="test2" style="display:none"> 
    <div>teststests</div> 
<img src="https://cdn4.iconfinder.com/data/icons/seo-and-data/500/view-content-window-16.png"/> 
    hide information 
</div>

來源

2015-08-17 20:19:52

文本「teststests」在哪裏？ –

@HelloWorld你想永遠顯示？如果是，讓我更新答案 –

@HelloWorld：更新的答案 –

FIDDLE

HTML：

<div id="show" style="opacity: 1;">Click this to show (insert wanted icon)</div> 

<div id="hide" style="opacity: 0;">Click this to hide (insert another icon)</div> 

<p id="text" style="opacity: 0;">testest</p>

的jQuery：

$(document).ready(function(){ 
$('#show').click(function(){ 
$('#show').fadeOut(500, 0); 
$('#text').fadeTo(500, 1); 
$('#hide').fadeTo(500, 1); 
}); 
$('#hide').click(function(){ 
$('#show').fadeTo(500, 1); 
$('#text').fadeOut(500, 0); 
$('#hide').fadeTo(500, 0); 
}); 
});

CSS：

#hide, #show{ 
position: absolute; 
top: 0; 
}

來源

2015-08-17 20:20:25

文本的位置 –

什麼文字？「顯示信息」和「隱藏信息」？ –

檢查新的小提琴。 –

這是假設你正在使用的字體真棒爲你的圖標和jQuery爲你的JavaScript

您的標記

<div> 
    <a href="#" class="toggle show"><i class="fa fa-hide"></i> Show Information</a> 
</div>

你的jQuery

$(function() { 
    $('.toggle').click(function() { 
     if ($(this).hasClass('show')) { 
      //replace the text 
      $(this).text('Hide information'); 
      //replace the icon 
      $(this).find('i').removeClass('fa-hide').addClass('fa-show'); 
      $(this).removeClass('show').addClass('hide); 
     } else { 
      //replace the text 
      $(this).text('Show information'); 
      //replace the icon 
      $(this).find('i').removeClass('fa-show').addClass('fa-hide'); 
      $(this).removeClass('hide').addClass('show);     
     } 
    }); 
});

這應該做乾杯。

來源

2015-08-17 20:21:48

你想要什麼：

JS部分：

$(document).ready(function(){ 
    $("div#test").click(function(){ 

    if ($('#test2').css('display') == 'none') { 
     $("#test2").show(); 
     $("#changeme").html("Hide Information"); 
     $("#changeimg").attr("src","https://cdn4.iconfinder.com/data/icons/seo-and-data/500/view-content-window-16.png"); 
}  
     else{ 
      $("#test2").hide(); 
     $("#changeme").html("Show Information"); 
      $("#changeimg").attr("src","https://cdn0.iconfinder.com/data/icons/octicons/1024/eye-16.png"); 

     } 
}); 
});

你只需要改變一點點在HTML比如增加一個ID：

<div id="test2" style="display:none"> 
teststests 
</div> 



<div id="test"> 
<img id="changeimg" src="https://cdn0.iconfinder.com/data/icons/octicons/1024/eye-16.png" /> 
<span id="changeme">Show Information</span> 
</div>

檢查http://jsfiddle.net/2pys32qj/

來源

2015-08-17 20:34:37 Jaaaaaaay

使用jQuery更改文本和圖標

回答

相關問題