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

        }
});

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

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

Answer 1

您可以参考下面的代码，我已将您要删除/添加到changec的css样式与css clasess h-changes和s-changes 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

Answer 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文件中的separete类并使用它们进行操作。

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

2 个答案: