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>

现在我有可能将每张照片都标记出来。但是我想只标记一张图片，我怎样才能在我的js-code中添加它？在用户点击“提交”之后，如何获得标记图片的值？问候！

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

Answer 2

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

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

$（'＃foo img：nth-child（1）'）。css（'border-color'，'1px solid＃00ff00'）;

只标记一张图片

2 个答案: