Question

我需要对jquery滑块的自定义箭头系统进行if比较。事情是我用＆＃34;％＆＃34;要这样做，这段代码似乎不适用于百分比：

$( "#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类

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修改存储在类中，并在需要时添加/删除它们。这就是我现在的代码：

$( "#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如果条件具有样式的百分比

2 个答案: