Wie fügt man mit jQuery eine Klasse zu einer Leiste hinzu?

Question

Wie fügt man der Leiste eine Klasse hinzu, wenn der Benutzer auf der Leiste schwebt? Ich habe einen Code wie den folgenden implementiert, aber nicht die richtige Ausgabe erhalten. Zum Beispiel fügen wir in CSS Code wie ".bar: hover: before" hinzu. Wie kann ich die .bar: hover: before in jQuery hinzufügen?

$(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

Mit jQuery, würden Sie die .addClass() Methode verwenden. Was würdest du tun, anstatt es voranzustellen? Sie würden dies tun: $('.bar').addClass('lnr lnr-star'); Vorbereitende Elemente fügt es nicht innerhalb des Tags, es stellt es als ein anderes Element vor dem Objekt ausgewählt. Wenn Sie eine Funktion aufrufen, während der Benutzer über ein Objekt fährt, verwenden Sie die Methode .hover(). Mit dem HTML haben Sie bereits das Symbol, Sie können seine Klassen entfernen, da jQuery dem Symbol die Klassen hinzufügt. Also alles zusammen würden Sie haben:

$(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>