javascript - 单击图像以更改文本框的值

Question

我需要一些建议/指导。我有一系列颜色图标。我想要实现的是有人点击颜色图标，它将颜色名称放入隐藏的文本字段中。

所以我的隐藏文本字段代码是 -

<form name=Data>
<input type=hidden id=colour name=colour size=7 maxlength=7>
</form>

然后我就有了我的图标表。所以我想要实现的是，当有人点击“teal.png”时，它会将文本字段的值更改为“teal”。

请问有人能为我指明正确的方向，告诉我如何最好地实现这一目标吗？

Select the background colour below<br><br><table class="radioiconstable"  width="200" border="0" cellpadding="0" cellspacing="0">   

<tr>     
<td><img src="custom/icons/teal.png"></td>  
<td><img src="custom/icons/grey.png"></td>  
<td><img src="custom/icons/green.png"></td>  
<td><img src="custom/icons/evergreen.png"></td>    

</tr>  

<tr>     
<td><img src="custom/icons/brightred.png"></td>  
<td><img src="custom/icons/crimson.png"></td>   
<td><img src="custom/icons/orange.png"></td>  
<td><img src="custom/icons/yellow.png"></td>     
</tr>  
<tr>    
<td><img src="custom/icons/sand.png"></td>  
<td><img src="custom/icons/brown.png"></td>
<td><img src="custom/icons/navy.png"></td>  
<td><img src="custom/icons/coolblue.png"></td>     


</tr>  
<tr>     
<td><img src="custom/icons/sky.png"></td> 
<td><img src="custom/icons/purple.png"></td>  
<td><img src="custom/icons/pink.png"></td>     
<td><img src="custom/icons/candyfloss.png"></td>  

</tr>  

</table>

Answer 1

您可以使用我在下面编写的函数。如果 URL 会改变(例如在文件名后添加更多 '/')，这可能不是最好的。

该函数所做的是首先它获取被点击图像的图像 src 并将 SRC 拆分为 '/'。因为文件名在您的示例中始终位于最后，所以您想获取最后一个值 url.length - 1。要获得相同的颜色，但现在您只有 green.png，所以您按 '.' 拆分并获取数组中的第一个元素 (pos: 0)。

$("img").click(function(){
    var url = $(this).prop('src').split("/");
    var file = url[url.length - 1].split(".")[0];

  $("#colour").val(file);
})

$("img").click(function(){
	var url = $(this).prop('src').split("/");
	var file = url[url.length - 1].split(".")[0];
  
  $("#colour").val(file);
  
  console.log(file)
})

img{
  height:50px;
  width:50px;
  background: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name=Data>
<input type=hidden id=colour name=colour size=7 maxlength=7>
</form>

Select the background colour below<br><br><table class="radioiconstable"  width="200" border="0" cellpadding="0" cellspacing="0">   

<tr>     
<td><img src="custom/icons/teal.png"></td>  
<td><img src="custom/icons/grey.png"></td>  
<td><img src="custom/icons/green.png"></td>  
<td><img src="custom/icons/evergreen.png"></td>    

</tr>  

<tr>     
<td><img src="custom/icons/brightred.png"></td>  
<td><img src="custom/icons/crimson.png"></td>   
<td><img src="custom/icons/orange.png"></td>  
<td><img src="custom/icons/yellow.png"></td>     
</tr>  
<tr>    
<td><img src="custom/icons/sand.png"></td>  
<td><img src="custom/icons/brown.png"></td>
<td><img src="custom/icons/navy.png"></td>  
<td><img src="custom/icons/coolblue.png"></td>     


</tr>  
<tr>     
<td><img src="custom/icons/sky.png"></td> 
<td><img src="custom/icons/purple.png"></td>  
<td><img src="custom/icons/pink.png"></td>     
<td><img src="custom/icons/candyfloss.png"></td>  

</tr>  

</table>