Question

我目前正在为项目创建新的图片滑块，但有一个问题。任务是在页面上显示一个图像，打开全尺寸onclick。但是，我想制作它以便功能消失并且图像再次点击返回到原始状态。

这是我的代码：

<html>
<head>
    <title>Fullscreen</title>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>

<body>
    <img src="//path" onClick="full()" id="image" />
    <script type="text/javascript">
        function full() {
            $(function () {
                $('#image').on('click', function () {
                    $(this).width(1000);
                });
            }); 
        }
    </script>
</body>   
</html>

图像打开的状态较好，但是如何实现第二个onclick函数来取消第一个？

感谢您的帮助！

Answer 1

要拍摄之前指定的事件，请使用

$('#image').off('click')

要缩小图像，请使用

var size = 0;
function full() {
    $(function () {
        $('#image').on('click', function () {
            if (size === 0) {
                size = $(this).width();
                $(this).width(1000);
            } else {
                $(this).width(size);
                size = 0;                     
            }
        });
    }); 
}

Answer 2

您真正要求的是：

以下代码向您展示了如何做您真正要求的事情：

首次点击后，您将宽度更改为1000，删除初始点击处理程序并添加新的点击处理程序以重置宽度
第二次单击后，重置with并删除第二个单击处理程序
第二次点击后的任何点击都不再做任何事情

<html>
<head>
    <title>Fullscreen</title>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
    <img src="//path" id="image" />
    <script type="text/javascript">
        $(document).ready(function() {
            $('#image').on('click', function() {
                $(this)
                    .width(1000)
                    .off('click')
                    .on('click', function() {
                        $(this)
                            .width('')
                            .off('click');
                });
            });
        }); 
    </script>
</body>   
</html>

另请参阅this Fiddle了解工作演示。

你可能想要什么：

您可能需要的只是一个单击处理程序，可以切换图像的宽度。

最好的方法就是这样：

<html>
<head>
    <title>Fullscreen</title>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
    <img src="//path" id="image" />
    <script type="text/javascript">
        $(document).ready(function() {
            $('#image').on('click', function() {
                var me = $(this);
                me.width(me.width() !== 1000 ? 1000 : '');
            });
        });
    </script>
</body>   
</html>

另请参阅this Fiddle了解工作演示。

Answer 3

如果宽度为1000px，则将其删除，否则将其设置为1000，如下所示。

<img src="//path" id="image" />

<script type="text/javascript">
    $('#image').on('click', function () {
        if ($(this).width() == '1000')
            $(this).width('');
        else
            $(this).width(1000);
    });
</script>

Answer 4

您不需要删除onclick侦听器，但您需要修复一些问题。你有一个内联的onclick回调，实际上是调用full函数反复附加一个新的点击监听器，最终导致点击处理程序被调用2 ^ n次。

您可以将代码保留在代码中，并在其中检查图像的当前宽度，以便选择单击时发生的情况（假设50px是起始宽度）：

＆＃13;

$('#image').on('click', function() {
  $(this).width($(this).width() != 1000 ? 1000 : 50);
});

＆＃13;

img {
  width: 50px;
  transition: width 0.2s linear;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://www.planwallpaper.com/static/images/518084-background-hd.jpg"  id="image" />

＆＃13;

Answer 5

使用class＆amp; toggleClass

function full() {
    $(function () {
        $('#image').on('click', function () {
            $(this).toggleClass('changeWidth');
        });
    }); 
}

Example

删除onclick功能

5 个答案:

您真正要求的是：

你可能想要什么：