我目前正在为项目创建新的图像滑块，但有一个问题。任务是在页面上显示一个图像，该图像将在单击时打开全尺寸。但是，我想让它使该功能消失并且图像再次在单击时返回到原始状态。
这是我的代码：
<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函数来带走第一个？
感谢您的帮助！
获取以前分配的事件 使用
$('#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;
}
});
});
}
如果宽度为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>
您不需要删除 onclick 侦听器，但您需要修复一些问题。您有一个内联的 onclick 回调，它实际上是在调用 full 函数，该函数一遍又一遍地附加新的单击侦听器，最终导致单击处理程序被调用 2^n 次。
您可以只保留代码中的那个，并在其中检查图像的当前宽度，以便选择单击它时会发生什么(假设 50px 是起始宽度(：
$('#image').on('click', function() {
$(this).width($(this).width() != 1000 ? 1000 : 50);
});img {
width: 50px;
transition: width 0.2s linear;
}<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" />使用 class & toggleClass
function full() {
$(function () {
$('#image').on('click', function () {
$(this).toggleClass('changeWidth');
});
});
}
例
你真正要求什么：
下面的代码向您展示了如何执行您的字面要求：
- 第一次单击后，将宽度更改为 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>
另请参阅此小提琴以获取工作演示。
<小时 />你可能想要什么：
您可能想要的只是一个单击处理程序，用于切换图像的宽度。
最好的方法是这样的：
<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>
另请参阅此小提琴以获取工作演示。