Question

我是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';
}

有人知道是否有更方便的方法吗？

Answer 1

usr/x86_64-myos-linux-gnu/

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

Answer 2

您可以使用通用函数并传递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>

Answer 3

我使用jQuery并将其简化为： HTML：

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

和js：

Context

这是一个jsfiddle： https://jsfiddle.net/mckinleymedia/k8qpda9t/

如何使用将相同的函数链接到不同的元素？

3 个答案: