Question

我有一个jquery函数。点击div class ='open'，它将打开另一个会话，按钮将改变图像。我为css切换id

然而，当我再次点击它时，我需要更改按钮的图像。

    <script type="text/javascript">
        $(document).ready(function(){
                $(".content").hide();       
                $(".open1").click(function(){
                    $(this).next().slideToggle(400);
                                $('#btn_01').attr('id','btn_01_on');
                });
        });

</script>

<style>
#btn_01{width:510px; height:109px; background:url('images/btn_01_on.png') no-repeat;}
    #btn_01:hover{width:510px; height:109px; background:url('images/btn_01_over.png') no-repeat;}
    #btn_01_on{width:510px; height:109px; background:url('images/btn_01_over.png') no-repeat;}
</style)

Answer 1

切换ID肯定不是最好的想法......您应该使用on类来修改显示。

<script type="text/javascript">
    $(document).ready(function(){
            $(".content").hide();       
            $(".open1").click(function(){
                $(this).next().slideToggle(400);
                var btn = $('#btn_01'), isOn = btn.hasClass('on');
                if(isOn) btn.removeClass('on') else btn.addClass('on');
            });
    });

</script>

<style>

    #btn_01{width:510px; height:109px; background:url('images/btn_01_on.png') no-repeat;}
    #btn_01:hover{width:510px; height:109px; background:url('images/btn_01_over.png') no-repeat;}
    #btn_01.on{width:510px; height:109px; background:url('images/btn_01_over.png') no-repeat;}
</style>

Answer 2

尝试以下脚本代码段：

   var prevId = "btn_01";
   var nextId = "btn_01_on";
   $(document).ready(function(){
        $(".content").hide();       
        $(".open1").click(function(){
            $(this).next().slideToggle(400);
            $(this).attr('id',function(index, id){
           return id==prevId?nextId:prevId;
        });
     });
  });

现在，只要您需要返回上一个ID，就可以使用prevId变量。这样您的旧图像就会开始显示。

Answer 3

试试这个：

$(document).ready(function () {
$(".content").hide();
$(".open1").click(function () {
    $(this).next().slideToggle(400);
    if ($(this).attr('id') == "btn_01") {
        $('#btn_01').attr('id', 'btn_01_on');
    } else {
        $('#btn_01_on').attr('id', 'btn_01');
    }
}
});
});

jquery使用id来切换按钮的图像

3 个答案: