如何將相同的功能鏈接到不同的元素？

我是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

如何將相同的功能鏈接到不同的元素？

回答

相關問題