Javascript / Jquery If condition with percentage for style

Question

我需要对 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: 只有一项选择了class foogallery

Answer 1

像这样。这允许您在类中包含任何 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>

Answer 2

感谢 Braham Dev，我找到了解决方案。只需将 css 修改存储在类中，并在需要时将其存储在 adding/removing 中。这就是我的代码现在的样子：

$( "#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%;}

Javascript / Jquery If condition with percentage for style

Javascript / Jquery If condition with percentage for style

javascript

css

jquery

percentage