單擊圖片以更改文本框的值

我需要一些建議/指導。我有一個顏色圖標的選擇。我想達到的目標是有人點擊顏色圖標，它將顏色的名稱放入隱藏文本字段中。單擊圖片以更改文本框的值

所以我隱藏的文本字段代碼 -

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

來源

2017-10-05 James Harding

歡迎來到SO，這不是免費的代碼編寫服務，希望您嘗試解決您的問題，然後在您遇到代碼中的特定問題時提出問題。請參閱[幫助中心]（http://stackoverflow.com/help）以查看[如何提出一個好問題]（http://stackoverflow.com/help/how-to-ask）以及什麼問題類型爲[主題]（http://stackoverflow.com/help/on-topic）爲站點 – Pete

您可以複製粘貼其中一個答案，它將工作。但是分解你的問題和尋找解決方案是程序員的重要技能。你可以搜索1）[如何在jQuery中添加點擊事件處理程序？]（https://api.jquery.com/click/）。 2）[如何獲取圖像元素的src']（https://stackoverflow.com/questions/19937162/jquery-get-the-image-src）。 3）[如何設置輸入元素的值？]（http://api.jquery.com/val/）。在實施這個過程中你會學到很多東西。如果你仍然卡住，你可以在這裏發佈。 – adiga

您可以使用我在下面寫的功能。如果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(){ 
 
\t var url = $(this).prop('src').split("/"); 
 
\t 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>

來源

2017-10-05 08:12:44 Adriani6

爲什麼downvote？請詳細說明，而不是僅僅爲了它而給出一個。 – Adriani6

加1爲您的答案。當你寫出正確的答案時，我知道這種感覺，而沒有人投票給你。 –

@ Alexandru-IonutMihai謝謝亞歷山德魯。這不是關於不投票，而是關於降低投票的問題，而不是證明問題是什麼，特別是當代碼完成OP要求的內容時:)。非常感謝Alexandru。 – Adriani6

首先我使用jQuery的功能的attr()的img的src屬性。

在那之後，我更換了子custom/icons/ & .png只得到從使用replace()功能src屬性的顏色。

最後，這裏是一個代碼片段證明什麼，我做的事：

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<br><br> 
 
<table class="radioiconstable" width="200" border="0" cellpadding="0" cellspacing="0"> 
 

 
<tr>  
 
<td><img src="custom/icons/teal.png">IMAGE 1</td> 
 
<td><img src="custom/icons/grey.png">IMAGE 2</td> 
 
<td><img src="custom/icons/green.png">IMAGE 3</td> 
 
<td><img src="custom/icons/evergreen.png">IMAGE 4</td>  
 

 
</tr> 
 

 
</table> 
 

 

 
<input type="text" id="colour" name="colour" size="7" maxlength="7">

來源

2017-10-05 08:13:05

不知道爲什麼這是downvoted - 似乎做什麼OP是問 – Stender

@Stender我不知道爲什麼也：/感謝您的支持！ –

@MehdiBouzidi，+1爲你的答案。當你寫出正確的答案時，我知道這種感覺，而沒有人投票給你。 –

沒有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">

來源

2017-10-05 08:16:16 Walk

單擊圖片以更改文本框的值

回答

相關問題