jquery显示/隐藏更改和更改按钮字体真棒图标也答案

【问题标题】：jquery show/hide changes and change button font-awesome icon alsojquery显示/隐藏更改和更改按钮字体真棒图标也
【发布时间】：2015-04-01 16:20:21
【问题描述】：

我有这段代码：

https://jsfiddle.net/mhqrbsje/

html:

<button type="button" id="changesDisplay" class="btn btn-info btn-xs guideactions displayChanges">
    <i class="fa fa-th"></i>Show
</button>

<br>
    <br>
<p class="changec">This was changed</p>
<p class="changec">This was changed</p>
<p>Normal text</p>

css:

.changec
{
    display:none;    
}

js:

$('#changesDisplay').click(function () {

        if ($(this).hasClass('h-changes')) {
            $(this).find('i').toggleClass('fa-th-large fa-th ');
            $('#changesDisplay').removeClass('h-changes');
            $('#changesDisplay').addClass('s-changes');

            $('.changec').show();

            $('.changec').css('color', 'red');
            $('.changec').css('font-style', 'italic');
            $('.changec').css('text-decoration', 'line-through');
        }
        else {
            $('#changesDisplay').addClass('h-changes');
            $('#changesDisplay').addClass('s-changes');
            $(this).find('i').toggleClass('fa-th-large fa-th');

            $('.changec').hide();

            $('.changec').css('color', '#000000');
            $('.changec').css('font-style', 'normal');
            $('.changec').css('text-decoration', 'none');

        }
});

显示一个按钮，单击时将显示/隐藏标有特定类的特定元素（已完成更改）。显示更改时，它们是红色的、斜体的和被删除的。显示/隐藏时按钮的图标也会发生变化。在 jsfiddle 中，无法使用字体很棒的图标。

基本上代码可以正常工作，但看起来很乱。考虑到可重用性，有没有办法以更优雅的方式重写它？

【问题讨论】：

您的问题似乎与主题不符；如果您特别要求进行代码清理，最好在标题中提出建议。

标签： jquery twitter-bootstrap-3 font-awesome

【解决方案1】：

您可以参考下面的代码，其中我已经使用 css 类 h-changes 和 s-changes 与 display 属性替换了您要删除/添加到 changec 的 css 样式，这样您就可以使用 toggleClass 来实现你的功能。 -

HTML

<button type="button" id="changesDisplay" 
        class="btn btn-info btn-xs guideactions displayChanges">
     <i class="fa fa-th"></i>Show
</button>

<br>
    <br>
<p class="changec">This was changed</p>
<p class="changec">This was changed</p>
<p>Normal text</p>

CSS

.changec
{
    display:none; 
}

.h-changes
{
    color: red;
    font-style: italic;
    text-decoration: line-through;
    display: block;
}

.s-changes
{
    color: #000000;
    font-style: normal;
    text-decoration: none;
    display: none;
}

jQuery

$('.changec').addClass('s-changes');
$('#changesDisplay').click(function () {
        $(this).find('i').toggleClass('fa-th-large fa-th ');
        $('.changec').toggleClass('h-changes s-changes');
});

JSFiddle Demo

【讨论】：

【解决方案2】：

我觉得你可以这样重写你的js

$('#changesDisplay').click(function () {

        if ($(this).hasClass('h-changes')) {
            $(this).find('i').toggleClass('fa-th-large fa-th ');
            $('#changesDisplay').removeClass('h-changes').addClass('s-changes');
            $('.changec').css('color', 'red').css('font-style', 'italic').css('text-decoration', 'line-through').show();
        }
        else {
            $('#changesDisplay').addClass('h-changes').addClass('s-changes');
            $(this).find('i').toggleClass('fa-th-large fa-th');
            $('.changec').css('color', '#000000').css('font-style', 'normal').css('text-decoration', 'none').hide();

        }
});

但我认为更好的方法是将所有 css 添加到 css 文件中的单独类并使用它们进行操作。

【讨论】：