尝试在悬停时为多个跨创建DRY划线文本

Trying to create DRY strikethrough text for multiple spans while hovering

本文关键字：创建 DRY 文本 悬停      更新时间：2023-09-26

我试图创建一个简单的网页，你可以悬停在一组字。当你悬停的时候，我希望你没有悬停的所有其他单词都变成三振出局。

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函数，当我将鼠标悬停在每个元素上时，它会改变span的字体颜色，如下所示:

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

我想做的是也有一个脚本，在悬停，罢工在每个跨度的文本没有被悬停在。我还希望当您单击每个跨度时，其他跨度中的三振出局将保留，直到您单击其他地方。

我知道如何用大量重复的代码做到这一点，但我希望使它很好和DRY。

删除所有没有悬停在span类选择器上的span，并在单击某个元素时保留删除，在单击另一个元素时删除。

$('.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');
   }
});
相关文章：