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

これで、すべての写真にマークを付けることができるようになりました。しかし、マークする画像を 1 つだけにしたいのですが、これを 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 に答える