1

1ページに2つの画像とテキストボックス（php）があります

画像をクリックすると、テキストを変更したいと思います。

私は初心者です。理解しにくいコードを送ってください。

<body>
    <img src="bier1.jpg" alt="u mad" onclick= "">
    <img src="bier2.jpg" alt="u mad" onclick= ""><br>

    <form>
    <input type="text" name="Example"/>
    </form>
</body>
4

4 に答える 4

1

id最初にテキストフィールドに追加する必要があります。

<input type="text" name="Example" id="myTextBox" />

次に、そのようなことを行うことができます：

<img src="bier1.jpg" alt="u mad" onclick="document.getElementById('myTextBox').value = this.alt;" />
<img src="bier2.jpg" alt="u mad" onclick="document.getElementById('myTextBox').value = this.alt;" />

これはあまりエレガントではありませんが、マークアップを変更せずにすべての画像に適用し、次のようなJavaScriptを使用します。

window.onload = function() {
    var oTextbox = document.getElementById('myTextBox');
    for (var i = 0; i < document.images.length; i++) {
        document.images[i].onclick = function() {
            oTextbox.value = this.alt;
        };
    }
};

上記のコードのライブテストケース。

「クリック可能」にする画像にクラスを適用することで、上記のコードを特定の画像に対してのみ機能させることもできます。次に例を示します。

<img src="bier1.jpg" alt="u mad" />
<img class="clickable" src="bier2.jpg" alt="u mad 2" />

2番目だけでテキストボックスが変更されるようにするには、次のようなコードを使用します。

window.onload = function() {
    var oTextbox = document.getElementById('myTextBox');
    for (var i = 0; i < document.images.length; i++) {
        var image = document.images[i];
        if (image.className === "clickable" || image.className.indexOf("clickable ") >= 0 || image.className.indexOf(" clickable") >= 0) {
            image.onclick = function() {
                oTextbox.value = this.alt;
            };
        }
    }
};​

を示すためにフィドルを更新しました。

于 2012-06-25T12:02:57.107 に答える
1

テキストボックスのテキストを変更したいのは正しいですか？はいの場合、コードは次のとおりです。

    <body>
        <img src="bier1.jpg" alt="u mad" onclick= "document.forms[0].elements['Example'].value = 'Image 1'">
        <img src="bier2.jpg" alt="u mad" onclick= "document.forms[0].elements['Example'].value = 'Image 2'"><br>

        <form>
        <input type="text" name="Example"/>
        </form>
    </body>
于 2012-06-25T12:03:05.030 に答える
1

Javascriptを使用する必要があります。私は、を使用してjavascriptコードを提供することを好みます。jQueryそのため、でGoogleをすばやく検索してくださいjQuery。

<script type="text/javascript">
    $(function(){
        //You need to bind click events to your images and probably
        $("img.has-message").click(function(){
            var msg = $(this).attr("data-msg");
            //get the message from that particular image
            $("#text_box_id").attr("value",msg);
            //changes the value of the text box to display the message
            return false;
        });
    });
</script>

したがって、このコードを<head></head>ページのタグに配置します

このコードは、HTMLを次のように変更できると仮定すると完全に機能します。

<body>
    <img src="bier1.jpg" alt="u mad" class="has-message" data-msg="message to be displayed when the image is clicked">
    <img src="bier2.jpg" alt="u mad" class="has-message" data-msg="message to be displayed when the image is clicked"><br>
    <form>
        <input type="text" id="text_box_id" name="Example"/>
    </form>
</body>

上記を機能させるには、jQueryがページに含まれている必要があることに注意してください。

于 2012-06-25T12:03:07.497 に答える
0

ページがphpページとして提供されていることを意味していると思います。私はこれを純粋にjavascriptで行います。擬似コードでは、次のようにします。

  1. javascriptで関数を作成する
  2. 関数は名前を使用して入力を検索します
  3. 関数は、入力のテキストを好きなように設定します（これは、クリックされた画像に基づく可能性があります）

私は間違いなくw3schoolsのウェブサイトを見ることをお勧めします。それはあなたが始めるためのたくさんの簡単な例をあなたに与えるでしょう。

また、基本から始めて、すべてを一度に機能させることができない場合は、少しずつ実行し、クリックしたときにアラートを表示するようにオンクリックを取得し、オンクリックが機能していることを確認したらテキストを設定してみてください。

于 2012-06-25T11:58:45.070 に答える