2012-07-21 23 views
0

我坚持这个任务:获取类被点击图像并修改相应的表单字段

我都附有的onclick =函数“myFunction的(本);”到我的网页的几十个图像。 函数内部检索点击图像的类名称。 最后,我想看看一个HTML表单,并修改与检索到的类具有相同ID的输入字段。

这里澄清一个例子:

  1. 用户点击带class =“绿色”形象
  2. 我们发现用id =“绿色”表单的输入域,并改变它的值与类图像1

  1. 用户点击= “红色”
  2. 我们发现用id =红色形式的”输入栏,并改变它的值设置为1

等..

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

+0

如果你把你现有的代码,人们可以帮助你更确切地:) :) – Nick 2012-07-21 02:41:37

回答

0

你可以用#符号拼接类的名称,然后选择输入标签:如果你正在使用jQuery

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

,我认为你是因为你所标记的问题“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是有效的)将只有一个元素与任何给定的ID,所以你“看看一个html表单”的概念并不适用可以直接使用document.getElementById()或jQuery/CSS选择器$("#someid")直接获取该元素的引用。

注意使用class属性为此,使它不可能到其他类分配到同一个IMG元素,所以我建议你改用data-xxx属性:

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

,然后在功能:

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

好点,谢谢! – 2012-07-21 03:14:48

+0

难道你不是指'$(this).data(“relatedFieldId”)'? – mplungjan 2012-07-21 04:09:07

+0

@mplungjan - 没有。我从不使用'.data()'来检索属性,因为我不喜欢它的内置数据转换,但是:在这种情况下,它会做同样的事情。 (我使用'.data(“key”)'来检索以前用.data(“key”,val)设置的值,而不是属性。) – nnnnnn 2012-07-21 07:16:14

相关问题