我需要对jquery滑块的自定义箭头系统进行if
比较。问题是我使用“%”来执行此操作,此代码似乎不适用于百分比:
$( "#galerie-right" ).click(function() {
var fg = $('.foogallery').css('left');
if( fg==''){
$('.foogallery').css('left', '-101%');
} else if( fg=='-101%'){
$('.foogallery').css('left', '-202%');
}
});
我知道css()
显然只采取计算结果,当行:
$('.foogallery').css('left', '-101%');
被称为,html元素应用了style="left:-101%"
。有没有办法可能以某种方式取得这个价值?
谢谢,
P.S:选择了foogallery
类只有一个项目
像这样的东西。这允许您在类中拥有任何css并使js独立于css值。
$(document).ready(function() {
$("#btn").click(function() {
$('.foogallery').toggleClass("state1 state2");
})
})
.foogallery {
width: 200px;
height: 200px;
}
.foogallery.state1::before{
content:'state1'
}
.foogallery.state2::before{
content:'state2'
}
.foogallery.state1{
background:#ccc;
}
.foogallery.state2{
background:#fcc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="foogallery state1"></div>
<button id="btn">Toggle</button>
感谢Braham Dev,我找到了解决方案。只需将css修改存储在类中,并在需要时添加/删除它们。这就是我的代码现在的样子:
$( "#galerie-right" ).click(function() {
if($('.foogallery').hasClass('galerie-left202')==true){
$('.foogallery').removeClass('galerie-left202');
}else if($('.foogallery').hasClass('galerie-left101')==true){
$('.foogallery').addClass('galerie-left202');
$('.foogallery').removeClass('galerie-left101');
}else{
$('.foogallery').addClass('galerie-left101');
}
});
CSS:
<!-- language: lang-css -->
div#galerie-photo div.foogallery.galerie-left101{left:-101%;}
div#galerie-photo div.foogallery.galerie-left202{left:-202%;}