jquery - jquery使用id切换按钮的图片

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

尝试这个 ：

$(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');
    }
}
});
});

Answer 3

尝试以下脚本片段：

   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 变量。这样，您的旧图像将开始显示。