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以这种方式更改代码：

＆＃13;

$(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";
  });
});

＆＃13;

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

＆＃13;

如评论中所述，如果您希望它像单选按钮那样，您可以使用此功能：

＆＃13;

$(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";
  });
});

＆＃13;

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

＆＃13;

不使用图像可以实现同样的目的：

＆＃13;

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

＆＃13;

.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;}

＆＃13;

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

＆＃13;

Answer 2

要立即更改所有项目，请在图片中添加一个类（我将使用名为img的类作为示例）：

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

然后，当您触发事件时，将它们全部更改为某种颜色，然后将this更改为所需的颜色。下面是一个单击“红色”项目的示例，将项目更改为绿色，其余项目更改为红色：

$(".img").click(function(){
    if( $(this).attr('src') == "red.png" ) {
        $(".img").attr('src', "red.png"); // Make them all red
        $(this).attr('src', "green.png"); // Change the clicked one to green
    }
});

Example Fiddle（注意你需要直接查看图像的src以查看更改）

Answer 3

只需使用类属性将整个列表更改为红色，然后此切换点击的项目

    //the jQuery function
    function toggleSrc()
    {
        var nextSrc = "red.png";

        if( $(this).attr("src") == "red.png" )
            nextSrc = "green.png";

        $(".image").attr("src","red.jpg");
        $(this).attr("src",nextSrc);
    }

    //binding function to .image
    $( document ).ready(function() {
        $(".image").click( toggleSrc );
    });

    //and the HTML:
    <img src="red.png" class="image" id="choice1">
    <img src="red.png" class="image" id="choice2">

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

3 个答案: