在jQuery中使用變量addClass（）

我是JS和jQuery的新手，但我一直試圖對一些Javascript變量使用addClass()和removeClass，並且不知道我在做什麼錯誤。在jQuery中使用變量addClass（）

我有這個1-5星評級系統。

我希望它在懸停時更改類，並在點擊時保存評分。

的HTML看起來像這樣：

<span class="icon-rating-empty" id="blob1"></span>

等了斑點2-5。

我目前擁有的JS是

var blob1 = document.getElementById('blob1'); 
 
var blob2 = document.getElementById('blob2'); 
 
var blob3 = document.getElementById('blob3'); 
 
var blob4 = document.getElementById('blob4'); 
 
var blob5 = document.getElementById('blob5'); 
 

 
var rating = 0; 
 

 
blob1.addEventListener('hover', function() { 
 
    $(blob1).addClass("icon-rating-full").addClass("green-blob").removeClass("icon-rating-empty") 
 
}, 
 
function() { 
 
    $(blob1).addClass("icon-rating-empty").removeClass("green-blob").removeClass("icon-rating-full") 
 
}); 
 

 
blob1.addEventListener('click', function() { 
 
    rating = 1; 
 
});

這不工作，我敢肯定，我不知道如何處理與jQuery的變量，但不能找到任何我應該做的事情。

我測試過了，如果我用$("#blob1")而不是$(blob1)它可以工作，但我想使用變量，因爲我有更多的計劃。

來源

2016-11-01 VladM

你有經典的addEventListener混合jQuery的事件。不要這樣做 – rlemon

如果你有更多的計劃*你正在使用ID blob1等等......我建議你立即改變你的計劃（並改爲使用單個父類） –

你應該添加一個單獨的所有五個元素的事件處理程序，並使用數據屬性查找單擊元素的評分。 – SLaks

你並不遙遠。您將需要設置兩組事件監聽器：一個用於用戶單擊某個星號時，另一個用於用戶懸停在星號之上。

我建議將「評級」保存爲一個變量。當用戶點擊明星時，您可以調整評分。我使用數據屬性來跟蹤每顆星的價值。調整評分後，您可以遍歷元素並相應地添加或刪除類。

懸停增加了一層複雜性。每次出現鼠標懸停時，您都需要遍歷明星元素並更新類，就好像這是新評級一樣。當你彈出鼠標時，你會根據你保存的評級再次更新班級。

var rating = 0; 
var stars = $('li'); 

// Set up listeners 
$('li').on('click', function(){ 
    rating = parseInt($(this).data('val')); 
    drawStars(rating); 
}); 

$('li').hover(
    function(){ 
    tempRating = parseInt($(this).data('val')); 
    drawStars(tempRating); 
    }, 
    function(){ 
    drawStars(rating); 
    } 
); 

// This function loops through the "star" elements and adds and removes a 'selected' class 
function drawStars(numStars){ 
    // Reset the colour by removing the selected class from all elements 
    for(var i = 0; i < stars.length; i++){ 
    $(stars[i]).removeClass('selected'); 
    } 
    // Add a selected class to some of the elements 
    for(var i = 0; i < numStars; i++){ 
    $(stars[i]).addClass('selected'); 
    } 
}

看到這個的jsfiddle：https://jsfiddle.net/ffz5y9fm/5/

來源

2016-11-01 21:38:45 Stafree

非常感謝。這正是我所做的。我沒有添加評分系統的所有其他組件，因爲我希望獲得有關該部分的幫助。但非常感謝您提供這一切。 – VladM

-1

未經測試：

<span class="rating"> 
<span data-star="0">STAR</span> 
<span data-star="1">STAR</span> 
<span data-star="2">STAR</span> 
<span data-star="3">STAR</span> 
<span data-star="4">STAR</span> 
<span data-star="5">STAR</span> 
</span> 

<script> 
try{ 
var elements = document.querySelectorAll('.rating'), 
    listener = function(e){ 
     var a = this, parent = a.parentNode, value = parseInt(a.getAttribute('data-star')); 
     // reset 
     parent.classList = 'rating'; 
     // add class 
     parent.classList.add('star-'+value); 
    }; 


// get all elements and attach listener 
for(var i = 0; i < elements.length; ++i){ 
    var current = elements[i], childs = current.children; 
    for(var ii = 0; ii < childs.length; ++ii){ 
     childs[ii].addEventlistener('mouseenter',listener,false); 
    } 
} 

} catch(e){ console.log('error',e); } 
</script>

如果有什麼不工作只是到這裏報到。

來源

2016-11-01 21:35:35 user2429266

在jQuery中使用變量addClass（）

回答

相關問題