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" />

如果只有第二个原因导致文本框发生更改，请使用以下代码：

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;
            };
        }
    }
};​

更新了 fiddle 来演示。

于 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 网站，该网站将为您提供许多简单的示例来帮助您入门。

也从基础开始并逐步提高，如果你不能一次全部工作，一点一点地做，让你的onclick在你点击它时发出警报，然后在你知道你的onclicks正常工作后尝试设置文本。

于 2012-06-25T11:58:45.070 回答