Question

我有三个不同的图像：red1，green1和blue1。当我单击red1时，我希望它更改为名为red2的图像。然后，如果我单击green1，我希望green1更改为green2，red2更改为red1。等等......这就是逻辑。

我发现一些代码看起来可能是我想要完成的基础，但我无法弄清楚如何修改代码。我不是一个程序员...只是在我继续努力解决这个问题。有人可以帮忙吗？这是代码：

的javascript：

<script type="text/javascript">

var prevSquare;

function swapImage( thisSquare )
{
if( prevSquare && prevSquare != thisSquare )
{

// Alter prevSquare image (if prevSquare is an <img> element)
prevSquare.src='images/red1.png';
}

// Alter thisSquare to your active image
thisSquare.src = 'images/green1.png';

// Assign value to previos square
prevSquare = thisSquare;
}

</script>

HTML：

<img src="images/red1.png" onclick='swapImage( this );'</a>
<img src="images/green1.png" onclick='swapImage( this );'</a>
<img src="images/blue1.png" onclick='swapImage( this );'</a>

Answer 1

使用正确的事件处理程序，然后将1替换为所点击图像来源中的2。
然后，您必须迭代图像，并对其他图像执行相同操作，但将2替换为1等。

＆＃13;

var images = document.querySelectorAll('.img');

images.forEach(function(img) {
  img.addEventListener('click', function() {
    var that = this;
    that.src = that.src.replace('1','2');
    
    images.forEach(function(img2) {
      if (img2 !== that) img2.src = img2.src.replace('2','1');
    });
  })
});

＆＃13;

<img src="images/red1.png"   class="img" />
<img src="images/green1.png" class="img" />
<img src="images/blue1.png"  class="img" />

＆＃13;

Answer 2

这是一个动态解决方案，您可以在元素本身的每个状态中指定图像，因此只需读取属性并更改源图像。

默认情况下，所有图像都处于关闭状态

＆＃13;

var prevSquare = null;
function swapImage( thisSquare )
{
    if( prevSquare && prevSquare != thisSquare ) {
        // Alter prevSquare image (if prevSquare is an <img> element)
        prevSquare.setAttribute("src", prevSquare.getAttribute("srcOff"));
    }

    // Alter thisSquare to your active image
    thisSquare.setAttribute("src", thisSquare.getAttribute("srcOn"));

    prevSquare = thisSquare;
}

＆＃13;

<img id="redSquare" src="http://via.placeholder.com/100x100/600.png?text=+"
srcOn="http://via.placeholder.com/100x100/f00.png?text=+" srcOff="http://via.placeholder.com/100x100/600.png?text=+" onclick='swapImage( this );'>
<img id="greenSquare" src="http://via.placeholder.com/100x100/060.png?text=+" srcOn="http://via.placeholder.com/100x100/0f0.png?text=+" srcOff="http://via.placeholder.com/100x100/060.png?text=+" onclick='swapImage( this );'>
<img id="blueSquare" src="http://via.placeholder.com/100x100/006.png?text=+" srcOn="http://via.placeholder.com/100x100/00f.png?text=+" srcOff="http://via.placeholder.com/100x100/006.png?text=+" onclick='swapImage( this );'>

＆＃13;

Answer 3

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<div>
    <div>
        <img id="red" src="images/red1.jpg" onclick="swap(this.id);">
    </div>
    <div>
        <img id="green" src="images/green1.jpg" onclick="swap(this.id);">
    </div>
</div>
</body>
</html>

<script type="text/javascript">
    function swap(argument) {
        var element = document.getElementById(argument);
        var attr_Name = element.getAttribute("src");
            attr_Name = attr_Name.split("/").pop();
        if(argument =="red"){
            if(attr_Name == "red1.jpg"){
                document.getElementById(argument).setAttribute("src", "images/red2.jpg");
            }else{
                document.getElementById(argument).setAttribute("src", "images/red1.jpg");
            }
        }
        else if(argument =="green"){
            if(attr_Name == "green1.jpg"){
                document.getElementById(argument).setAttribute("src", "images/green2.jpg");
            }else{
                document.getElementById(argument).setAttribute("src", "images/green1.jpg");
            }
        }
    }
</script>

Answer 4

可以使用不同按钮颜色的标签来实现例如按钮为红色，带有空标签如果点击按钮之前是红色，则单击后按钮变为绿色：

final ImageButton newButton;
newButton = findViewById(R.id.newButton);

newButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {

if (newButton.getTag() == null) {
newButton.setImageResource(R.drawable.green);
newButton.setTag("green");
}
else if (newButton.getTag() == "green") {
newButton.setImageResource(R.drawable.blue);
newButton.setTag("blue");
}
else if (newButton.getTag() == "blue") {
newButton.setImageResource(R.drawable.red);
newButton.setTag(null);
}
}
});

使用onclick更改多个图像

4 个答案: