Question

如何在ajax响应后删除Zoom类悬停状态。我使用$（＆＃34;＃element＆＃34;）。removeClass（＆＃34; zoom＆＃34;）但这不是删除整个类的工作。我想只删除类的悬停satae。

CSS代码

<style type="text/css">
    .zoom
    { 
        -moz-transition: all 2s;
        -webkit-transition: all 2s;
        transition: all 2s;
    }
    .zoom:hover 
    {
            -moz-transform: scale(3);
            -webkit-transform: scale(3);
            transform: scale(3);
    }
    .blur 
    {
        -webkit-filter: blur(5px); /* Safari 6.0 - 9.0 */
        filter: blur(5px);
    }
</style>

JS代码

<script type="text/javascript">
    $(document).ready(function($) 
    {

        $("#street-display").click(function()
        {
            $("#street-display").addClass('zoom');

            var value=$('#street-display').attr('src');
            var imgsplit=value.split('/');
            var actimgname=imgsplit[1].split('.');
            var nextimageapper=parseInt(actimgname[0])+parseInt(1);

            $.ajax({
                url: 'street_change.php',
                type: 'POST',
                data: {param1: nextimageapper},
            })
            .done(function(resp) {
                $('#street-display').attr('src','street_images/'+resp);                     
            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");                    
            });
        });
    });
</script>

Answer 1

在CSS中定义zoom-no-hover类：

<style type="text/css">
    .zoom,
    .zoom-no-hover
    { 
        -moz-transition: all 2s;
        -webkit-transition: all 2s;
        transition: all 2s;
    }
    .zoom:hover 
    {
            -moz-transform: scale(3);
            -webkit-transform: scale(3);
            transform: scale(3);
    }
    .blur 
    {
        -webkit-filter: blur(5px); /* Safari 6.0 - 9.0 */
        filter: blur(5px);
    }
</style>

然后使用jquery删除zoom类并添加zoom-no-hover类：

<script type="text/javascript">
    $(document).ready(function($) 
    {

        $("#street-display").click(function()
        {
            $("#street-display").addClass('zoom');

            var value=$('#street-display').attr('src');
            var imgsplit=value.split('/');
            var actimgname=imgsplit[1].split('.');
            var nextimageapper=parseInt(actimgname[0])+parseInt(1);

            $.ajax({
                url: 'street_change.php',
                type: 'POST',
                data: {param1: nextimageapper},
            })
            .done(function(resp) {
                $('#street-display').attr('src','street_images/'+resp);
                $(".zoom").addClass("zoom-no-hover") ;
                $(".zoom").removeClass("zoom") ;  
            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");                    
            });
        });
    });
</script>

如何在AJAX响应后删除类的悬停状态

1 个答案: