Question

我有一个带有onclick事件的按钮，如下所示：

<button type="button" onclick="captions(event)">
     <img src="someimg.png">
</button>

我需要能够在不使用ID引用它的情况下更改img src。我想传递“this”和事件（我需要做一些其他需要传递事件的事情），但我不能让它工作。 JS的例子如下：

function captions(event) {
             this.src = this.src.replace("img2.png");
}

谢谢！

Answer 1

我建议不使用内联事件处理程序。您应该使用JavaScript“不引人注意地”绑定事件。

首先给按钮一个类：

<button type="button" class="captions">
     <img src="someimg.png">
</button>

然后绑定事件：

window.onload = function(){
    var captions = document.getElementsByClassName('captions');
    for(var i = 0, len = captions.length; i < len; i++){
        captions[i].addEventListener('click', function(event){
            // this is your button, what you clicked on
            // you need to get the image
            var image = this.getElementsByTagName('img')[0];

            // this.src.replace("img2.png") doesn't do what you think it does
            // String.replace takes 2 parameters
            image.src = '/your/new/image';
        });
    }
};

DEMO：http://jsfiddle.net/WcFzq/

Answer 2

您可以使用event.target属性（http://www.w3schools.com/jsref/event_target.asp）获取单击的元素。

function captions(event) {
         event.target.src = "img2.png";
}

这是jsfiddle。

Answer 3

以下将解决您的问题。

function captions(event) {
   var img = this.childNodes[0];
   img.src = img.src.replace("img2.png");
}

Answer 4

如果你想做一个内联onclick事件，你应该只需要将一个捕获元素的新变量传递给函数，如下所示：

function captions(element, event) {
    . . . do stuff . . .
}

然后你会调用它，将this传递给element参数，如下所示：

<button type="button" onclick="captions(this, event);">
    <img src="someimg.png">
</button>

在JS函数中传递“this”和“event”

4 个答案: