Question

你在页面上有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>

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

Live test case of above code

您还可以通过将类应用于您想要“可点击”的图像，使上述代码仅适用于某些图像，例如：

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

Updated fiddle to demonstrate

Answer 2

我是否想要更改文本框的文本？如果是，这是代码：

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

Answer 3

您需要使用Javascript，我更喜欢使用jQuery提供javascript代码，因此请在jQuery上快速搜索Google。

<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需要包含在您的页面上才能实现上述功能。

Answer 4

我猜它们意味着该页面被用作php页面。我会纯粹用javascript做这件事。在伪代码中，我会做以下几点。

在javascript中创建功能
功能使用名称
函数将输入的文本设置为您喜欢的任何内容（这可能基于单击的图像

Id deffinately建议查看w3schools网站，它将为您提供许多简单的例子来帮助您入门。

同样开始基础工作并且按照自己的方式工作，如果你不能一次性完成工作，一点一点地做，点击它时让你的onclick提醒，然后在你的onclicks工作时尝试设置文本

单击图像并更改文本

4 个答案: