Question

我的项目有一个回调函数。

我可以更改按钮样式吗？

<script type="text/javascript">
    $(document).ready(function(){
        $(".slide-toggle").click(function(){
            $(".box").animate({
                width: "toggle"
            });
        });
    });
</script>
</head>
<body>
     <button type="button" class="slide-toggle">Callback</button>
     <div class="box">
         <div class="box-inner">Lorem</div>
     </div>

谢谢！

Answer 1

您可以使用jQuery函数toggleClass向元素添加/删除类。这样您的代码就很干净，您可以在代码中的任何地方使用相同的动画，并且可以轻松修改它们。

请参阅下面的示例。 在当前示例中，我们在按钮单击时将skin类添加到box元素。您可以根据需要修改skin课程。我还添加了box-transition课程来制作动画效果，您也可以根据自己的喜好进行编辑，建议您查看this。

＆＃13;

$(function(){

  $('.slide-toggle').on('click', function(){
    $(this).toggleClass('active');
    $('.box').toggleClass('skin');
  });

});

＆＃13;

.box{
  width: 200px;
  height: 200px;
  background: #f34;
}

.box-transition{
  -webkit-transition: all 500ms ease-out;
  -moz-transition: all 500ms ease-out;
  -o-transition: all 500ms ease-out;
  transition: all 500ms ease-out;
}

.skin{
  width: 100px;
  height: 100px;
  background: #ccc;
}

.active{
  background: #ccc;
  color: #fff;
  border: none;
  outline: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button type="button" class="slide-toggle">Callback</button>
<div class="box box-transition">
  <div class="box-inner">Lorem</div>
</div>

＆＃13;

Answer 2

$(document).ready(function(){
    $(".slide-toggle").click(function(){
        $(".box").animate({
            width: "toggle",
            color: '#f00',
            background: '#00f'
        });
    });
});

或者他们在评论中提到我们一个班级

<style>
    .your_class {
        color: #f00;
        background: #00f;
    }
</style>
<script type="text/javascript">
    $(document).ready(function(){
        $(".slide-toggle").click(function(){
            $(".box").animate({
                width: "toggle"
            }).toggleClass('your_class');
        });
    });
</script>

（下次使用正确的标签）

在jQuery幻灯片切换上更改按钮样式

2 个答案: