-1

嘿这里是图片列表：

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

现在我有可能标记每张照片。但我只想标记一张图片，如何在我的 js 代码中添加它？在用户稍后单击“提交”后，我如何获得标记图片的值？问候！

4

2 回答 2

1

也许你可以给每个图像一个 id（并传递一个对应于 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>

submit() 函数的 javascript 将是这样的：

<script>
function submit()
{
    document.getElementById("markedImage").value = markedImage;
}
</script>
于 2013-05-20T16:51:53.540 回答
0

如果您是 Javascript 新手，我建议您学习 jQuery。

看一下这里以了解 nth-child 的工作原理，然后使用 jQuery 选择您想要的任何元素。你的 jQuery 看起来像这样：

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

于 2013-05-20T16:51:14.677 回答