使用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

检查此

代码

$(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

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

Answer 3

这里假设你的图标使用的是一种很棒的字体，而你的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);                
        }
    });
});

这应该是干杯。