У меня есть три разных изображения: 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>
0
dlc3172 26 Авг 2017 в 22:50

4 ответа

Лучший ответ

Это динамическое решение, вы указываете изображение в каждом состоянии на самом элементе, поэтому просто прочитайте атрибут и измените исходное изображение.

По умолчанию все изображения выключены

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;
}
<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 );'>
0
Manuel Sánchez 26 Авг 2017 в 20:04

Используйте правильные обработчики событий, затем просто замените 1 на 2 в источнике изображения, по которому щелкнули.
Затем вам нужно перебрать изображения и сделать то же самое для других изображений, но заменить 2 на 1 и т. Д.

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');
    });
  })
});
<img src="images/red1.png"   class="img" />
<img src="images/green1.png" class="img" />
<img src="images/blue1.png"  class="img" />
0
adeneo 26 Авг 2017 в 19:57
<!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>
0
Somnath 26 Авг 2017 в 20:27

Это может быть достигнуто с помощью тегов для разных цветов кнопок, например кнопка красного цвета с нулевым тегом кнопка становится зеленой после нажатия, если она была красной до и т. д .:

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);
}
}
});
0
Mmm Nnn 11 Мар 2019 в 14:43