将JavaScript函数应用于多个元素

因此，我正在构建一个moch网站，并使用CSS3和JavaScript添加了一个图像缩放功能，首先是我的代码

HTML:

JS:

现在，在您拥有多个图像之前，这一切都是完美的。所以我要找的是一个更好的系统，可以达到同样的效果。我已经尝试了一些方法，但它一直在使用JavaScript代码，可以处理所有图像，但可以单独缩放每个图像

.contentimgleft

和

.contentimgleftl

是相同的，只是

的宽度和高度不同。所以我希望有办法用相同的JavaScript代码将这两种样式更改为单独的图像

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

我尝试制作一个JSFIDLE，但出于某种原因，它不喜欢
（/（？：^\s）
位。
ID是唯一的，尽管没有什么可以阻止您在文档中多次使用同一ID。但是，如果您有重复的ID，那么
document.getElementById（“img”）
通常会返回第一个元素-请参阅。因此，无论单击哪个元素，您的代码都只会处理第一个
id=“img”
元素

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

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

一种方法是将参数
this
传递给
onclick
函数，以访问处理事件的HTML元素-请参阅

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"/>


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

如果所有


但是，JavaScript需要更改以添加或删除
contentimgleftl
类，而不是替换
img
的类名，因为如果只替换它，将丢失所有
.zoomable
样式

,，
如果您决定使用这种方法，可能会很有用。
ID是唯一的，尽管没有什么可以阻止您在文档中多次使用同一ID。但是，如果您有重复的ID，则
document.getElementById（“img”）
通常会返回第一个元素-请参阅。因此，无论单击哪个元素，您的代码都只会处理第一个
id=“img”
元素

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

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

一种方法是将参数
this
传递给
onclick
函数，以访问处理事件的HTML元素-请参阅

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"/>


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

如果所有


但是，JavaScript需要更改以添加或删除
contentimgleftl
类，而不是替换
img
的类名，因为如果只替换它，将丢失所有
.zoomable
样式

,，
如果您决定使用这种方法，可能会很有用。
非常感谢，在我们说话的时候更改了我的代码！我不能说我完全理解“this”这个参数，但它工作得很好。可能有助于解释此场景中的
this
关键字-“如果您想使用它来访问处理事件的HTML元素，您必须确保this关键字实际写入了
onclick
属性”非常感谢，在我们说话时更改了我的代码！不能说我完全理解参数“this”“但是它工作得很好。可能有助于解释此场景中的
this
关键字-“如果要使用此关键字访问处理事件的HTML元素，必须确保this关键字实际写入
onclick
属性”
function image() {
    if (document.getElementById("img").className.match(/(?:^|\s)contentimgleft(?!\S)/) ) {
        document.getElementById("img").className="contentimgleftl";
    } else {
        document.getElementById("img").className="contentimgleft";
    }
}

<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"/>

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

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%;
}

.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%;
}

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