Question

所以我在php上创建这个基本的图像网站，我试图在每个人的个人资料上创建一个图像空间。我希望点击时图像最大化（就像现在一样）。然后再次点击它返回到它的旧位置（它不会这样做）。你可以在这里看到一个例子http://www.uk-sf.com/profile.php?view=pgallery:17

但这是代码：下面是点击的img元素

<img id="1" onclick="clickimage(this)" class="pgall" src="XXX">

然后你有了javascript函数

function clickimage(id)
        {
            var y = document.getElementsByClassName('pgall');
            var x = document.getElementsByClassName('pgall2');

            var length = y.length,
            element = null;
            for (var i = 0; i < length; i++) {
              element = y[i];
              element.className = 'pgall';
            }

            var length = x.length,
            element = null;
            for (var i = 0; i < length; i++) {
              element = x[i];
              element.className = 'pgall';
            }

            id.className = 'pgall2';
        }

正如您所看到的，它将始终更改单击到我的第二个CSS类“pgall2”的内容。如果id.className ==“pgall2”，它需要做的是改变它“pgall”。但是我尝试使用if语句执行此操作，但它不起作用。

                if(id.className == 'pgall')
                {
                id.className = 'pgall2';
                }
                else {
                id.className = 'pgall';
                }

Answer 1

您的函数不添加类，它会替换整个类值。通过更改类，您实际上是在创建新元素。此时您没有相同的事件处理程序。

如何正确添加其他课程：How do I add a class to a given element?

有关动态元素事件的更多信息：http://toddmotto.com/attaching-event-handlers-to-dynamically-created-javascript-elements

更新：你有jQuery可用。为什么不用它？

jQuery('.pgall').click(function() {
    jQuery(this).toggleClass('pgall pgall2');
});

http://jsfiddle.net/isherwood/vPC7r/

Javascript，图片点击（功能，onclick）

1 个答案: