знак только одна картинка

Question

эй вот список фотографий:

<img src="inventory_images/pic1.jpg" onclick="changeColor(this);" /> 
<img src="inventory_images/pic2.jpg" onclick="changeColor(this);" /> 
<img src="inventory_images/pic3.jpg" onclick="changeColor(this);" /> 

и вот JS-код, который я использовал:

<script> 
function changeColor(obj) { 
obj.style.borderColor ="#00FF00"; 
} 
</script> 

Теперь у меня есть possibilty, чтобы получить каждую картину отмеченную. Но я хочу, чтобы только одно изображение было помечено, как я могу добавить это в свой js-код? И как я могу получить значение для отмеченного изображения после того, как пользователь нажал «отправить» позже? Приветствую!

Answer 1

Если вы новичок в Javascript, я бы предложил изучить jQuery.

Посмотрите сюда, чтобы узнать, как работает nth-child, а затем используйте jQuery для выбора нужного элемента. Ваш jQuery будет выглядеть примерно так:

$ ('# foo img: nth-child (1)'). Css ('border-color', '1px solid # 00ff00');

Answer 2

Возможно, вы могли бы дать каждому изображению идентификатор (и передать номер, соответствующий функции changeColor для присвоения переменной, мы будем использовать для отправки формы):

<img id="img1" src="inventory_images/pic1.jpg" onclick="changeColor(this, 1);" /> 
<img id="img2" src="inventory_images/pic2.jpg" onclick="changeColor(this, 2);" /> 
<img id="img3" src="inventory_images/pic3.jpg" onclick="changeColor(this, 3);" /> 

А затем он так каждый раз вы отметите изображение, прежде чем сделать это, снимите все изображения:

<script> 
markedImage = 0; // This variable used for the submit; 

function unmarkAll() { 
    document.getElementById("img1").style.borderColor = "#000000"; // Assuming black is the default border color, you might want to change it. 
    document.getElementById("img2").style.borderColor = "#000000"; 
    document.getElementById("img3").style.borderColor = "#000000"; 
} 

function changeColor(obj, markedId) { 
unmarkAll(); 
obj.style.borderColor ="#00FF00"; 
markedImage = markedId; 
} 
</script> 

и как для отправки формы, я хотел бы использовать скрытое поле формы, и установите его значение на количество маркированного изображения в событие onsubmit. Сначала нужно создать форму HTML, чтобы представить:

<form action="submitPage.html" onsubmit="submit();"> 
<input type="hidden" id="markedImage" name="markedImage"></input> 
<input type="submit" value="Submit"></input> 
</form> 

И в JavaScript для функции представить() будет что-то вроде этого:

<script> 
function submit() 
{ 
    document.getElementById("markedImage").value = markedImage; 
} 
</script>