jQuery CSSのスタイルを元に戻す方法は？

Question

2回目のクリックでCSSのスタイリングを元に戻す最善の方法は何ですか？

私がしたいのは、ユーザーがボタンをもう一度クリックすると、すべて元の位置に戻るだけです。すべてを逆に宣言しなければ、これを行う最も効率的な方法は何か分かりません。特に、ステータスを変更するクラスは1つだけではありません。

HTML：

<div class="wrapper-available">    
    <a class="available">Available</a> 
    <div class="available-img"><img src="http://www.petmd.com/sites/all/modules/breedopedia/images/thumbnails/cat/tn-california-spangled-cat.jpg" width="40" height="40"></div> 
</div> 

CSS：

.wrapper-available {  
    display: inline-block; 
    margin-top: 40px; 
    position: relative; 
} 

.available { 
    border-radius: 15px; 
    padding: 5px 20px 5px 50px; 
    background: #39b54a;  
    color: #FFF; 
    display: inline-block; 
    font-weight: bold; 
} 

.available-img { 
    left: 0; 
    position: absolute; 
    top: -12px; 
    transition: all .20s ease-in; 
} 

    .available-img img { 
     border-radius: 30px; 
     border: 2px solid #39b54a; 
    } 

のjQuery：

$(".available").click(function() { 
    $(this).css({ "background" : "#CCC", "padding" : "5px 50px 5px 20px" }).text("Away"); 

    $(".available-img").css({ 
     "left": 100 
    }); 

    $(".available-img img").css({ 
     "border" : "2px solid #CCC" 
    }); 
    }); 

http://codepen.io/aguerrero/pen/ORKjya

Answer 1

最も簡単な方法はにクラスを切り替えることであろうインラインスタイルを追加する代わりに.available要素内のtext()を切り替える代わりに、を使用してください。私はあなたのjQueryのスニペットに追加スタイルであなたのCSSドキュメントに3つのクラスが追加

$(".available").click(function() { 
 
    $(this).text(function(i, t) { 
 
    return t == 'Available' ? 'Away' : 'Available'; 
 
    }).closest('.wrapper-available').toggleClass('away'); 
 
});

.wrapper-available { 
 
    display: inline-block; 
 
    margin-top: 40px; 
 
    position: relative; 
 
} 
 
.available { 
 
    border-radius: 15px; 
 
    padding: 5px 20px 5px 50px; 
 
    background: #39b54a; 
 
    color: #FFF; 
 
    display: inline-block; 
 
    font-weight: bold; 
 
} 
 
.wrapper-available.away .available { 
 
    background-color: #CCC; 
 
    padding: 5px 50px 5px 20px; 
 
} 
 
.available-img { 
 
    left: 0; 
 
    position: absolute; 
 
    top: -12px; 
 
    transition: all .20s ease-in; 
 
} 
 
.wrapper-available.away .available-img { 
 
    left: 70px; /* note 70px seems to work better than 100px here */ 
 
} 
 
.available-img img { 
 
    border-radius: 30px; 
 
    border: 2px solid #39b54a; 
 
} 
 
.wrapper-available.away .available-img img { 
 
    border: 2px solid #CCC; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper-available"> 
 
    <a class="available">Available</a> 
 
    <div class="available-img"> 
 
    <img src="http://www.petmd.com/sites/all/modules/breedopedia/images/thumbnails/cat/tn-california-spangled-cat.jpg" width="40" height="40"> 
 
    </div> 
 
</div>

Answer 2

：これを試してみてください。これで、jQueryを使用して各要素の特定のスタイリングを更新する代わりに、.activeクラスを使用して、3つのセレクタで新しいスタイリングを指定できます。

CSS：

.available.active { 
    background: #CCC; 
    padding: 5px 50px 5px 20px; 
} 

.available-img.active { 
    left: 100px; 
} 

.available-img.active img { 
    border: 2px solid #CCC; 
} 

jQueryのスニペットは、現在、ご希望の要素に.activeクラスを切り替えます。これら2：

<a class="available">Available</a> 
<div class="available-img"> 

$（この）の.text（）は現在、利用可能な間とアウェイを切り替えます。

のjQuery：

$('.available').click(function() { 
    $(this).toggleClass('active').siblings().toggleClass('active'); 
    $(this).text(function(i, text) { 
    return (text === 'Available') ? 'Away' : 'Available'; 
    }); 
}); 

例：代わりhttp://codepen.io/praktikdan/pen/wzVrGM