點擊功能和懸停功能

Question

當用戶懸停在一個圓圈上時，該圓圈以及其左側的圓圈應該填充爲黃色，並且當用戶點擊一個圓圈時，該圓圈以及其左側的圓圈應該得到充滿了綠色。

當用戶再次懸停時，最後一個活動的圓圈應該回滾到懸停效果功能，並填充黃色，如果用戶不喜歡再次點擊，則必須保留以前填充的綠色圓圈。

我給!important爲rating-hover類，當用戶再次徘徊給它一個優先事項，現在的問題是，當用戶速率4首次和再想一想率後2和懸停第二個圓之前填滿的4顆星仍然可以看到，我不想看到，當他再次懸停時，用戶必須有新評級，如果未點擊，必須保留之前點擊過的星星。並且請我不喜歡使用!important;歡迎任何其他解決方案！

$(function() { 
 
    $('.rating-circle').hover(function() { 
 
     $(this).prevAll().addBack().addClass('rating-hover'); 
 
    }, 
 
    function() { 
 
     $(this).prevAll().addBack().removeClass('rating-hover'); 
 
    }); 
 
}); 
 

 
$(function() { 
 
    $('.rating-circle').click(function() { 
 
    $('.rating-circle').removeClass('rating-chosen'); 
 
    $(this).prevAll().addBack().addClass('rating-chosen'); 
 
    }); 
 
});

.rating-circle { 
 
    height: 2em; 
 
    width: 2em; 
 
    border: .1em solid black; 
 
    border-radius: 1.1em; 
 
    display: inline-block; 
 
    margin: 0; 
 
    padding: .1em; 
 
} 
 
.rating-hover { 
 
    background-color: yellow !important; 
 
} 
 
.rating-chosen { 
 
    background-color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="rating-container"> 
 
    <div class="rating-circle"></div> 
 
    <div class="rating-circle"></div> 
 
    <div class="rating-circle"></div> 
 
    <div class="rating-circle"></div> 
 
    <div class="rating-circle"></div> 
 
</div>

Answer 1

達到你要求，你只需要設置.rating-hover類更具體的是.rating-chosen，使其覆蓋的效果。爲此，我在元素選擇器前面加上了前綴，特別是div。當click事件觸發時，您還需要刪除.rating-hover類。

最後，請注意，您也可以將所有代碼放在一個document.ready處理程序中。試試這個：

$(function() { 
 
    $('.rating-circle').hover(function() { 
 
    $(this).prevAll().addBack().addClass('rating-hover'); 
 
    }, function() { 
 
    $(this).prevAll().addBack().removeClass('rating-hover'); 
 
    }); 
 

 
    $('.rating-circle').click(function() { 
 
    $('.rating-circle').removeClass('rating-chosen rating-hover'); 
 
    $(this).prevAll().addBack().addClass('rating-chosen'); 
 
    }); 
 
});

.rating-circle { 
 
    height: 2em; 
 
    width: 2em; 
 
    border: .1em solid black; 
 
    border-radius: 1.1em; 
 
    display: inline-block; 
 
    margin: 0; 
 
    padding: .1em; 
 
} 
 
div.rating-hover { 
 
    background-color: yellow; 
 
} 
 
.rating-chosen { 
 
    background-color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="rating-container"> 
 
    <div class="rating-circle"></div> 
 
    <div class="rating-circle"></div> 
 
    <div class="rating-circle"></div> 
 
    <div class="rating-circle"></div> 
 
    <div class="rating-circle"></div> 
 
</div>

Answer 2

嘗試增加的評級懸停類重要的！懸停工作正常，但由於您的風格選擇了最後的評分，您將需要！重要的那裏。

$(function() { 
 
    $('.rating-circle').hover(function() { 
 
     $(this).prevAll().addBack().addClass('rating-hover'); 
 
    }, 
 
    function() { 
 
     $(this).prevAll().addBack().removeClass('rating-hover'); 
 
    }); 
 
}); 
 

 
$(function() { 
 
    $('.rating-circle').click(function() { 
 
    $('.rating-circle').removeClass('rating-chosen'); 
 
    $(this).prevAll().addBack().addClass('rating-chosen'); 
 
    }); 
 
});

.rating-circle { 
 
    height: 2em; 
 
    width: 2em; 
 
    border: .1em solid black; 
 
    border-radius: 1.1em; 
 
    display: inline-block; 
 
    margin: 0; 
 
    padding: .1em; 
 
} 
 
.rating-hover { 
 
    background-color: yellow !important; 
 
} 
 
.rating-chosen { 
 
    background-color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="rating-container"> 
 
    <div class="rating-circle"></div> 
 
    <div class="rating-circle"></div> 
 
    <div class="rating-circle"></div> 
 
    <div class="rating-circle"></div> 
 
    <div class="rating-circle"></div> 
 
</div>