获取单击图像的类并修改相应的表单域

Question

我坚持这个任务：

我有一个附加onclick =“myFunction（this）;”的函数到我页面的数十张图片。 在函数内部，我检索被点击图像的类名。 最后，我想查看一个html表单并修改一个与检索到的类具有相同id的输入字段。

这是一个澄清的例子：

1. 用户点击图片并使用class =“green”
2. 我们找到一个id =“green”的表单的输入字段，并将其值更改为1

或

1. 用户点击图片并使用class =“red”
2. 我们找到id = red“的表单的输入字段，并将其值更改为1

依旧......

我有大部分代码，但我似乎没有得到的是我应该如何使用检索到的图像类来查找表单中的相应id。

Answer 1

如果您正在使用jQuery，并且我认为您已经标记了问题“jquery”，那么您不需要onclick=...，您希望使用jQuery分配处理程序：

$("img").click(function() {
    $("#" + $(this).attr("class")).val("1");
    // or
    $("#" + this.className).val("1");
});

但是使用现有的myFunction()，您可以执行此操作：

function myFunction(el) {
    var matchingInput = document.getElementById(el.className);
    if (matchingInput)
        matchingInput.value = "1";
}

如果您要查找的元素具有id，那么“查看html表单内部”的概念并不真正适用，因为（如果您的html有效）将只有一个元素具有任何给定ID，因此您可以直接使用document.getElementById()或等效$("#someid")的jQuery / CSS选择器获取对该元素的引用。

请注意，为此目的使用class属性，无法将其他类分配给相同的img元素，因此我建议您使用data-xxx属性：

<img data-relatedFieldId="field1" class="someclass1 someclass2" src="...">

然后在你的函数中：

$("#" + $(this).attr("data-relatedFieldId")).val("1");

Answer 2

您可以将类名与#符号连接起来，然后选择输入标记：

 var clas = $(this).attr('class') // if image has only 1 class 
 $('#' + clas).val('1')