Javascript / Jquery如果条件具有样式的百分比

问题描述 投票:-2回答:2

我需要对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类只有一个项目

javascript jquery css percentage
2个回答
0
投票

像这样的东西。这允许您在类中拥有任何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>

0
投票

感谢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%;}
© www.soinside.com 2019 - 2024. All rights reserved.