如何将相同的功能链接到不同的元素？

我是JavaScript的新人。现在我试图改变不同图像的CSS属性。我想要做的事很简单，只要有人点击它就改变这些图片的透明度。如何将相同的功能链接到不同的元素？

我在HTML文件中的代码是这样的：

<body> 
    <img id="aa" src="1.png" onclick="functionaa()"> 
    <img id="ab" src="3.png" onclick="functionab()"> 
    <img id="ac" src="2.png" onclick="functionac()"> 
    <img id="ad" src="4.png" onclick="functionad()"> 
</body>

虽然，我可以做同样的功能，每一个形象一样遵循

function functionaa() 
{ 
    document.getElementById('aa').style.cssText = 'opacity:0.5'; 
} 

function functionab() 
{ 
    document.getElementById('ab').style.cssText = 'opacity:0.5'; 
}

有谁知道是否有一种方法更容易吗？

来源

2015-11-13 Qianjing Liu

您可以使用常用功能并通过this上下文来获取点击dom对象作为参数。这种方式即使你可以避免getElementById()方法。

function functiona(ele) { 
 
    ele.style.cssText = 'opacity:0.5'; 
 
}

<body> 
 
    <img id="aa" src="1.png" onclick="functiona(this)"> 
 
    <img id="ab" src="3.png" onclick="functiona(this)"> 
 
    <img id="ac" src="2.png" onclick="functiona(this)"> 
 
    <img id="ad" src="4.png" onclick="functiona(this)"> 
 
</body>

来源

2015-11-13 04:51:38

function opacity(id) 
 
{ 
 
document.getElementById(id).style.cssText = 
 
'opacity:0.5'; 
 
}

<img id="aa" src="facebook-icon.png" onclick="opacity('aa')"> 
 
    <img id="ab" src="facebook-icon.png" onclick="opacity('ab')"> 
 
    <img id="ac" src="facebook-icon.png" onclick="opacity('ac')"> 
 
    <img id="ad" src="facebook-icon.png" onclick="opacity('ad')">

来源

2015-11-13 04:56:20 Kishan

我会使用jQuery和简化下来到这一点： HTML：

<img src="1.png" class="js-dim" /> 
<img src="3.png" class="js-dim" /> 
<img src="2.png" class="js-dim" /> 
<img src="4.png" class="js-dim" />

和JS：

$('.js-dim').click(function(){ 
    $(this).fadeOut(); 
});

这里有一个的jsfiddle： https://jsfiddle.net/mckinleymedia/k8qpda9t/

来源

2015-11-13 05:03:15

如何将相同的功能链接到不同的元素？

回答

相关问题