使用 jQuery 更改文本和图标

Question

当您单击“隐藏信息”时，我想将文本从“隐藏信息”更改为“显示信息”并更改图标：https://cdn4.iconfinder.com/data/icons/seo-and-data/500/view-content-window-16.png。

当再次点击文本时，它应该从“显示信息”变为“隐藏信息”。

请记住，当您显示信息时，应显示文本“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>

Answer 1

检查这个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>

Answer 2

这是假设你为你的图标使用了很棒的字体，为你的 javascript 使用了 jquery

你的标记

<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);                
        }
    });
});

应该这样做 干杯。

Answer 3

正是你想要的：

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/

Answer 4

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;
}