如何使用 jQuery 将 class 添加到柱状图?
How to add a class to a bar using jQuery?
如何在用户将鼠标悬停在栏上时向栏中添加 class?
我部署了如下代码,但没有得到正确的输出。
例如在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>
使用 jQuery,您将使用 .addClass() method. So what you would do instead of prepending it. You would do this: $('.bar').addClass('lnr lnr-star');
Prepending items doesn't add it inside the tag, it puts it as another item before the object selected. When calling a function when the user hovers over an object, you would use the .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>
如何在用户将鼠标悬停在栏上时向栏中添加 class? 我部署了如下代码,但没有得到正确的输出。
例如在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>
使用 jQuery,您将使用 .addClass() method. So what you would do instead of prepending it. You would do this: $('.bar').addClass('lnr lnr-star');
Prepending items doesn't add it inside the tag, it puts it as another item before the object selected. When calling a function when the user hovers over an object, you would use the .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>