0

画像を選択するためのボタンがあります。デフォルトの状態は「画像の選択」です。画像を選択すると、ボタンのinnerHTMLがファイル名に変更されます。さて、私がやりたいのは、「画像を選択」と表示されていない状態でボタンにカーソルを合わせると、「別の画像を選択」と表示してから、オンマウスアウトで元の状態に戻したいということです。以前（画像のファイル名）でした。

以下をまとめましたが、機能していません...JSとjQueryのオプションを利用できます。

window.addEventListener('load', function(event) {
    var btn = document.getElementById('file-button');
    if (btn.innerHTML !== "Select Image") {
        var temp = btn.innerHTML;
        btn.onmouseover = btn.innerHTML = "Select a different image";
        btn.onmouseout = btn.innerHTML = temp;
    }
});

解決策-Ianに感謝します

window.addEventListener('load', function(event) {
    var btn = document.getElementById('file-button');
    btn.onmouseover = function () {
        if (this.innerHTML !== "Select Image") {
            var temp = this.innerHTML;
            this.innerHTML = "Select a different image";
        }
    };

    btn.onmouseout = function () {
        if (this.innerHTML !== "Select Image") {
            this.innerHTML = temp;
        }
    };
});
4

3 に答える 3

0

これを試して：

window.addEventListener('load', function(event) {
    var btn = document.getElementById('file-button');
    if (btn.innerHTML !== "Select Image") {
        var temp = btn.innerHTML;
        btn.onmouseover = function () {
            this.innerHTML = "Select a different image";
        };

        btn.onmouseout = function () {
            this.innerHTML = temp;
        };
    }
});

.onmouseoverおよび.onmouseoutプロパティを関数として設定する必要があります。次に、ボタンを。thisの代わりに。で参照することもできますbtn。

アップデート：

ロジックを次のように再配置したいと思います。

window.addEventListener('load', function(event) {
    var btn = document.getElementById('file-button');
    var temp = btn.innerHTML;
    btn.onmouseover = function () {
        if (this.innerHTML !== "Select Image") {
            temp = this.innerHTML;
            this.innerHTML = "Select a different image";
        }
    };

    btn.onmouseout = function () {
        if (this.innerHTML !== "Select Image") {
            this.innerHTML = temp;
        }
    };
});

http://jsfiddle.net/3WkXp/

于 2013-02-08T06:29:58.193 に答える
0

jQueryを使用しているので、次のように書くことができます

$(function(){
    var temp = $('#file-button').html();
    if (temp !== "Select Image") {
        $('#file-button').hover(function(){
            $(this).html('Select a different image')
        },function(){
            $(this).html(temp)
        });
    }
})

デモ:フィドル

于 2013-02-08T06:33:24.193 に答える
-1

これを試してください

実際には、btn の html !== の場合にのみ、イベント リスナーをバインドしています。Select Image

var temp;
$("#file-button").mouseover(function() {
    if ($(this).html() !== "Select Image")
    {
        temp = $(this).html();
        $(this).html("Select a different Image");
    }
}).mouseout(function() {
    if ($(this).html() === "Select a different Image")
        $(this).html(temp);
});
于 2013-02-08T06:58:17.950 に答える