只标记一张图片[关闭]答案

【问题标题】：mark only one picture [closed]只标记一张图片[关闭]
【发布时间】：2013-05-20 16:34:42
【问题描述】：

嘿，这里是图片列表：

<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 代码中添加它？在用户稍后单击“提交”后，我如何获得标记图片的值？问候！

【问题讨论】：

您是否尝试过自己实现任何您遇到问题的东西，或者您只是在寻找这里的人来告诉您如何做？
我厌倦了一些东西，但我对javascript很陌生，所以它没有用。有什么帮助吗？
你应该展示你的尝试。
这可能会有所帮助：jsfiddle.net/EtaHx

标签： javascript image function submit

【解决方案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>

【讨论】：

好的，如果我想在“submitPage.html”的前端显示选择的图像 $picture = $_POST['markedImage'];回声$图片；这样可以吗？

【解决方案2】：

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

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

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

【讨论】：