javascript - 单击时在长列表中的两个图像之间切换

Question

我有一个很长的列表(动态创建的)，只能包含两个图像中的一个； red.png 或 green.png 看起来像这样:

<img src="red.img" id="choice1" onclick=" changeIcon('1')">
<img src="red.img" id="choice2" onclick=" changeIcon('2')">
...
<img src="red.img" id="choiceN" onclick=" changeIcon('N')">

我使用以下 java 脚本设法在红色和绿色之间切换:

function changeIcon(line){

    var l = "choice".concat(line);

            if (document.getElementById(l).src == "red.png") 
            {document.getElementById(l).src = "green.png";
            }else {
              document.getElementById(l).src = "red.png";
            }
}

我想做的是，当我点击红色图像时，只有这个(id？)变成绿色，列表的其余部分变成红色，如果我点击绿色然后它变回红色，所以整个名单又变红了。这个概念类似于单选按钮，但不使用表单

Answer 1

好吧，尝试使用:

var l = "choice" + line;

或者，更好的是，我建议您使用 jQuery 以这种方式更改代码:

$(function () {
  // Replace "body" with some static parent of "img.toggle".
  $("body").on("click", ".toggle", function () {
    if ($(this).attr("src") == "red.img")
      this.src = "green.img";
    else
      this.src = "red.img";
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<img src="red.img" class="toggle" />
<img src="red.img" class="toggle" />
<img src="red.img" class="toggle" />

正如评论中提到的，如果你想让它像一个单选按钮，你可以使用这个:

$(function () {
  // Replace "body" with some static parent of "img.toggle".
  $("body").on("click", ".toggle", function () {
    // Reset everything.
    $(".toggle").attr("src", "red.img");
    this.src = "green.img";
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<img src="red.img" class="toggle" />
<img src="red.img" class="toggle" />
<img src="red.img" class="toggle" />

不用图片也能达到同样的效果:

$(function () {
  $(".radios").on("click", "span", function () {
    $(".radios span").removeClass("active");
    $(this).addClass("active");
  });
});

.radios span {display: inline-block; width: 12px; height: 12px; border: 1px solid #999; cursor: pointer; border-radius: 100%;}
.radios span.active {border-color: #000; background-color: #666;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="radios">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>