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>

Answer 2

首先，我使用 jQuery 函数attr()获得了src的{{1}}属性。

之后，我更换了子串img＆amp; custom/icons/仅使用replace()函数从.png属性中获取颜色。

最后，这是一个代码段，展示了我所做的事情：

＆＃13;

src

＆＃13;

$("td").on("click",function(){
var color=$(this).find("img").attr("src");
$("#colour").val(color.replace("custom/icons/","").replace(".png",""));
})

＆＃13;

Answer 3

没有jQuery：

var colorImages = document.querySelectorAll('td img');

colorImages.forEach(function(image){
    image.addEventListener('click', function(event){
        var clickedImageURL = event.target.src;
        var color = clickedImageURL.replace('custom/icons/','').replace('.png','');
        document.querySelector('#colour').value = color;
    });
});

我建议为那些保存颜色值而不是从文件名中获取颜色值的图片添加属性，例如：<img src="custom/icons/yellow.png" data-color="yellow">

单击“图像”以更改文本框的值

3 个答案: