将 JavaScript 函数应用于多个元素

Question

所以我正在构建一个 moch 网站，我正在添加一个使用 CSS3 和 JavaScript 进行图像缩放的东西，所以首先是我的代码。

HTML：

<img id="img" onclick="image()" class="contentimgleft" src="test.jpg">

CSS：

.contentimgleft {
    float: left;
    margin: 5px 5px 5px 10px;
    background-color: #888888;
    width: 25%;
    height: 25%;
    -webkit-transition: all .4s linear;
    -moz-transition: all .4s linear;
    -o-transition: all .4s linear;
    -ms-transition: all .4s linear;
    transition: all .4s linear;
}
.contentimgleftl {
    float: left;
    margin: 5px 5px 5px 10px;
    background-color: #888888;
    width: 97%;
    height: 98%;
    -webkit-transition: all .4s linear;
    -moz-transition: all .4s linear;
    -o-transition: all .4s linear;
    -ms-transition: all .4s linear;
    transition: all .4s linear;
}

JS：

function image() {
    if (document.getElementById("img").className.match(/(?:^|\s)contentimgleft(?!\S)/) ) {
        document.getElementById("img").className="contentimgleftl";
    } else {
        document.getElementById("img").className="contentimgleft";
    }
}

现在这可以完美运行，直到您拥有多个图像。所以我正在寻找的是一个更好的系统，可以达到相同的结果。我已经尝试了几件事，但它不断回归到具有适用于所有图像但单独缩放每个图像的 JavaScript 代码。

.contentimgleft 和 .contentimgleftl 除了 width 和 height 之外是相同的。所以我希望有某种方法可以将这两种样式更改为具有相同 JavaScript 代码的单个图像？

还要注意，它也是一个用于右浮动图像的类，但为了简单起见，我省略了它们，因为它们完全相同。

我尝试制作一个 jsfiddle，但由于某种原因它不喜欢 (/(?:^|\s) 位。

Answer 1

ID 是唯一的，尽管没有什么可以阻止您在文档中多次使用同一个 ID。但是，如果您有重复的 ID，那么document.getElementById("img")通常会返回第一个 - 请参阅behavior of javascript getElementById() when there are elements with duplicate IDs in HTML DOM?。因此，您的代码将只会操作 first id="img" 元素，无论单击哪个元素。

因此，您应该删除id 属性或为每个图像设置不同的id 属性值。我怀疑您是否真的需要id，所以在下面的示例中它们已被删除。

如果id 被删除，则需要有一种方法使image() 函数在单击的img 上工作。 JavaScript（在其核心）具有scope 的概念，我们可以使用它来使每个函数在正确的图像上执行。

一种方法是将参数 this 传递给 onclick 函数以访问处理事件的 HTML 元素 - 请参阅 How does the "this" keyword work?

HTML

<img onclick="image(this)" class="contentimgleft" src="http://lorempixel.com/50/50/abstract/1"/>
<img onclick="image(this)" class="contentimgleft" src="http://lorempixel.com/50/50/abstract/2"/>

JavaScript

function image(img) {
    if (img.className.match(/(?:^|\s)contentimgleft(?!\S)/)) {
        img.className = "contentimgleftl";
    } else {
        img.className = "contentimgleft";
    }
}

see demo

要回答 CSS 问题，是的，您可以声明重复属性一次，根据您的操作方式，您可能需要更改 JavaScript 匹配类名的方式。

如果所有<img> 元素都需要相同的样式，只需使用

img {
    float: left;
    margin: 5px 5px 5px 10px;
    background-color: #888888;
    width: 25%;
    height: 25%;
    -webkit-transition: all .4s linear;
    -moz-transition: all .4s linear;
    -o-transition: all .4s linear;
    -ms-transition: all .4s linear;
    transition: all .4s linear;
}
.contentimgleftl {
    width: 97%;
    height: 98%;
}

但如果你愿意，你可以使用另一个 CSS 类作为公共属性，例如

.zoomable {
    float: left;
    margin: 5px 5px 5px 10px;
    background-color: #888888;
    width: 25%;
    height: 25%;
    -webkit-transition: all .4s linear;
    -moz-transition: all .4s linear;
    -o-transition: all .4s linear;
    -ms-transition: all .4s linear;
    transition: all .4s linear;
}
.contentimgleftl {
    width: 97%;
    height: 98%;
}

对 HTML 进行以下更改

<img onclick="image(this)" class="zoomable" src=""/>

然而，JavaScript 需要更改为 add 或 remove contentimgleftl 类，而不是替换 img 的类名，因为如果你只是替换它，您将失去所有.zoomable 样式。

"hasClass" with javascript?, How do I add a class to a given element?, 如果您决定使用这种方法，Remove CSS class from element with JavaScript (no jQuery) 可能会很有用。