ホバリング中に複数のスパンのDRY取り消し線テキストを作成しようとしています

Question

単語のセットにマウスを置くことができる簡単なWebページを作成しようとしています。あなたが動かすと、私はあなたがホバリングしていない他のすべての言葉が打ち出されることを望みます。

HTMLは次のとおりです。

 <div class="row col-xs-12" id="jobs"> 
      <h2><span class="selector">Writer and Editor</span>, <span class="selector">Social Media Slayer</span>, <span class="selector">Amateur Developer</span>.</h2> 
     </div> 

今私は、私は各要素にカーソルを合わせると、そのようなスパンのフォントの色変更、簡単なjQueryの機能があります。

$('.selector').hover(function(){ 
    $(this).css('color', '#fddbd1'); 
}, function() { 
    $(this).css('color', 'white'); 
}); 

を

私がやりたがっているのは、ホバリングされていないすべてのスパンのテキストを叩くスクリプトです。また、各スパンをクリックすると、他のスパンのストライクアウトは、他の場所をクリックするまで残ります。

私はこれを繰り返したくさんのコードで行う方法を知っていますが、私はそれを素早く素早くしたいと考えていました。

Answer 1

上に乗っていないすべてのスパンクラスセレクタを取り除き、要素をクリックすると取り消し線を保持し、別の要素をクリックすると削除します。

$('.selector').hover(function(){ 
    // Cleanup/Reset to default position 
    $('.selector').removeClass('clicked'); 
    $('.selector').css('text-decoration', 'none'); 

    $('.selector').not(this).each(function() { 
     $(this).css('text-decoration', 'line-through'); 
    }); 
}, function() { 
    if(!$(this).hasClass('clicked')) 
    { 
     $('.selector').not(this).each(function() { 
      $(this).css('text-decoration', 'none'); 
     }); 
    }  
}); 
$('.selector').click(function(evt) { 
    $('.selector').not(this).each(function() { 
     $(this).css('text-decoration', 'line-through'); 
    }); 
    $(this).addClass('clicked'); 
}); 
$('body').click(function(evt) { 
    if(!$(evt.target).hasClass('clicked')) { 
     $('.selector').css('text-decoration', 'none'); 
    } 

});