jquery show/hide 更改并更改按钮字体-很棒的图标

Question

我有这段代码：

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

        }
});

显示一个按钮，单击时将 show/hide 标记有特定 class 的特定元素（已完成更改）。显示更改时，它们为红色、斜体和划线。 show/hide 时按钮的图标也会改变。在 jsfiddle 中无法使用超棒的字体图标。

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

Answer 1

我觉得你可以这样重写你的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 文件中的单独类并使用它们进行操作。

Answer 2

您可以参考下面的代码，我已经用 css 类 h-changes 和 s-changes 替换了您要删除/添加到 changec 的 css 样式带有 display 属性，这样您就可以使用 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

jquery show/hide 更改并更改按钮字体-很棒的图标

jquery show/hide changes and change button font-awesome icon also

jquery

twitter-bootstrap-3

font-awesome