如何使用jQuery將類添加到欄中？

Question

當用戶將鼠標懸停在欄上時，如何向欄中添加類？ 我部署了一個類似下面的代碼，但沒有得到正確的輸出。

例如在CSS中，我們以相同的方式添加類似「.bar：hover：before」的代碼，如何在jQuery中添加.bar：hover：before？

$(function() { 
 
    $("#bars li .bar").each(function(key, bar) { 
 
    var percentage = $(this).data('percentage'); 
 

 
    $(this).css('height', percentage + '%'); 
 

 
    $(this).animate({ 
 
     'height': percentage + '%' 
 
    }, 1000); 
 
    }); 
 
}); 
 

 

 
$(window).load(function() { 
 
    $('.bar').prepend('class="lnr lnr-star"'); 
 

 
})

#chart { 
 
    width: 650px; 
 
    height: 300px; 
 
    margin: 30px auto 0; 
 
    display: block; 
 
} 
 
#chart #numbers { 
 
    width: 50px; 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
    display: inline-block; 
 
    float: left; 
 
} 
 
#chart #numbers li { 
 
    text-align: right; 
 
    padding-right: 1em; 
 
    list-style: none; 
 
    height: 29px; 
 
    border-bottom: 1px solid #444; 
 
    position: relative; 
 
    bottom: 30px; 
 
} 
 
#chart #numbers li:last-child { 
 
    height: 30px; 
 
} 
 
#chart #numbers li span { 
 
    color: #eee; 
 
    position: absolute; 
 
    bottom: 0; 
 
    right: 10px; 
 
} 
 
#chart #bars { 
 
    display: inline-block; 
 
    background: rgba(0, 0, 0, 0.2); 
 
    width: 600px; 
 
    height: 300px; 
 
    padding: 0; 
 
    margin: 0; 
 
    box-shadow: 0 0 0 1px #444; 
 
} 
 
#chart #bars li { 
 
    display: table-cell; 
 
    width: 100px; 
 
    height: 300px; 
 
    margin: 0; 
 
    text-align: center; 
 
    position: relative; 
 
} 
 
#chart #bars li .bar { 
 
    display: block; 
 
    width: 70px; 
 
    margin-left: 15px; 
 
    background: #49E; 
 
    position: absolute; 
 
    bottom: 0; 
 
    height: 0; 
 
    -webkit-transition: height 1s ease-in-out; 
 
    -moz-transition: height 1s ease-in-out; 
 
    -o-transition: height 1s ease-in-out; 
 
    transition: height 1s ease-in-out; 
 
} 
 
#chart #bars li .bar:hover { 
 
    background: #5AE; 
 
    cursor: pointer; 
 
} 
 
#chart #bars li .bar:hover:before { 
 
    color: white; 
 
    content: "\e814" attr(data-percentage); 
 
    position: relative; 
 
    bottom: 20px; 
 
} 
 
#chart #bars li span { 
 
    color: #eee; 
 
    width: 100%; 
 
    position: absolute; 
 
    bottom: -2em; 
 
    left: 0; 
 
    text-align: center; 
 
} 
 
.lnr.lnr-star { 
 
    font-size: 13px; 
 
    margin-right: 1px; 
 
    color: yellow; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
<link href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css" rel="stylesheet" /> 
 

 
<div id="chart"> 
 

 
    <ul id="bars"> 
 
    <li> 
 
     <div data-percentage="56" class="bar"></div><span><i class="lnr lnr-star"></i></span> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 1

使用jQuery，你可以使用.addClass()方法。所以你會做什麼而不是預先考慮它。您可以這樣做：$('.bar').addClass('lnr lnr-star');預先添加的項目不會將其添加到標籤內，它會在選定對象之前將其作爲另一個項目。當用戶懸停在對象上時調用函數時，您可以使用.hover()方法。使用HTML，你已經有了這個圖標，你可以移除它的類，因爲jQuery會將這些類添加到圖標中。因此，所有在一起你會：

$(function() { 
 
    $("#bars li .bar").each(function(key, bar) { 
 
    var percentage = $(this).data('percentage'); 
 

 
    $(this).css('height', percentage + '%'); 
 

 
    $(this).animate({ 
 
     'height': percentage + '%' 
 
    }, 1000); 
 
    }); 
 
}); 
 

 

 
$('.bar').hover(function() { 
 
    $('.bar-icon').addClass('lnr lnr-star'); 
 
}, function() { 
 
    $('.bar-icon').removeClass('lnr lnr-star'); 
 
});

#chart { 
 
    width: 650px; 
 
    height: 300px; 
 
    margin: 30px auto 0; 
 
    display: block; 
 
} 
 
#chart #numbers { 
 
    width: 50px; 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
    display: inline-block; 
 
    float: left; 
 
} 
 
#chart #numbers li { 
 
    text-align: right; 
 
    padding-right: 1em; 
 
    list-style: none; 
 
    height: 29px; 
 
    border-bottom: 1px solid #444; 
 
    position: relative; 
 
    bottom: 30px; 
 
} 
 
#chart #numbers li:last-child { 
 
    height: 30px; 
 
} 
 
#chart #numbers li span { 
 
    color: #eee; 
 
    position: absolute; 
 
    bottom: 0; 
 
    right: 10px; 
 
} 
 
#chart #bars { 
 
    display: inline-block; 
 
    background: rgba(0, 0, 0, 0.2); 
 
    width: 600px; 
 
    height: 300px; 
 
    padding: 0; 
 
    margin: 0; 
 
    box-shadow: 0 0 0 1px #444; 
 
} 
 
#chart #bars li { 
 
    display: table-cell; 
 
    width: 100px; 
 
    height: 300px; 
 
    margin: 0; 
 
    text-align: center; 
 
    position: relative; 
 
} 
 
#chart #bars li .bar { 
 
    display: block; 
 
    width: 70px; 
 
    margin-left: 15px; 
 
    background: #49E; 
 
    position: absolute; 
 
    bottom: 0; 
 
    height: 0; 
 
    -webkit-transition: height 1s ease-in-out; 
 
    -moz-transition: height 1s ease-in-out; 
 
    -o-transition: height 1s ease-in-out; 
 
    transition: height 1s ease-in-out; 
 
} 
 
#chart #bars li .bar:hover { 
 
    background: #5AE; 
 
    cursor: pointer; 
 
} 
 
#chart #bars li .bar:hover:before { 
 
    color: white; 
 
    content: "\e814" attr(data-percentage); 
 
    position: relative; 
 
    bottom: 20px; 
 
} 
 
#chart #bars li span { 
 
    color: #eee; 
 
    width: 100%; 
 
    position: absolute; 
 
    bottom: -2em; 
 
    left: 0; 
 
    text-align: center; 
 
} 
 
.lnr.lnr-star { 
 
    font-size: 13px; 
 
    margin-right: 1px; 
 
    color: yellow; 
 
}

<link href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css" rel="stylesheet" /> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 

 
<div id="chart"> 
 

 
    <ul id="bars"> 
 
    <li> 
 
     <div data-percentage="56" class="bar"> 
 
     <i></i> 
 
     </div> 
 
    </li> 
 
    </ul> 
 
</div>