javascript - 将 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? .所以你的代码将永远只操纵第一个 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%;
}

但是如果你愿意，你可以为公共(public)属性使用另一个 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 需要更改以添加 或删除 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)如果您决定使用该方法，可能会有用。