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

Question

我有一个 jquery 函数。 单击 div class='open'，它将打开另一个 session ，按钮将更改图像。 我为 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>