Javascript-форум - Закрытие пары одинаковых изображений в IE

Javascript-форум (https://javascript.ru/forum/)

- Internet Explorer (https://javascript.ru/forum/css-html-internet-explorer/)

- - Закрытие пары одинаковых изображений в IE (https://javascript.ru/forum/css-html-internet-explorer/67534-zakrytie-pary-odinakovykh-izobrazhenijj-v-ie.html)

Закрытие пары одинаковых изображений в IE

Уважаемые знатоки!
Условие: имеется множество пар одинаковых изображений.
Задача: при последовательном нажатии на два одинаковые изображения, они должны исчезать.
Заранее благодарен за доходчивое объяснение...
Всем Успехов!

Борис К,
при клике на картинку сохранить в переменную а, если а == '' то a = img, если a != '' и a !=img то сравнить a.src == img.src то удалить a и img иначе a = '';

Уважаемый профессор Рони, благодарю Вас за быстрый отклик))
Но я почти новичок... (((
Могли бы привести конкретный код? Пожалуйста!!!

Борис К,
могу только посоветовать Учебник или начинайте кодировать макет.

Профессор Рони, благодарю!
Буду учиться)))

А что значит

Цитата:

Сообщение от рони

кодировать макет

Борис К,
несколько картинок, html, css, что-то про click в скрипте

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">

  </style>


</head>

<body>
<div id="content">тут картинки</div>
 <script>

  </script>
</body>
</html>

Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Здравствуйте!

Судя по вашему сообщению, вы ну совсем не знаете javascript.

Освойте основы языка и вопрос отпадет сам, полностью или частично.
А с чем не справитесь - поможем.

На сайте javascript можно начать изучать с учебника, раздел Основы javascript.
Возможно, вам также понадобится HTML - учебник есть, например, здесь: http://ru.html.net/tutorials/html/

Задавайте конкретные вопросы по ходу дела.

Да, я почти ничего не знаю... просматривая чужой код, интуитивно немного его подстраивал под себя))
Но благодаря Вам, Рони, кое-что узнал о переменных (давно пора было!).
Вот мой упрощённый шаблон с картинками:

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">

  </style>
</head>
<body>
<div id="content">
<table>
<tr>
<td><img src="https://www.toptal.com/designers/subtlepatterns/patterns/congruent_outline.png" width="150"></td><td><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSt_IzMTuDrclTeTYtP0QHnsjQaua7lhdlPwCxjW_sEnFLJlmWL" width="150"></td>
</tr>
<tr>
<td><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSt_IzMTuDrclTeTYtP0QHnsjQaua7lhdlPwCxjW_sEnFLJlmWL" width="150"></td><td><img src="https://www.toptal.com/designers/subtlepatterns/patterns/congruent_outline.png" width="150"></td>
</tr>
</table>
</div>
<javascript>
var a = ""

</javascript>
</body>

Жду подсказки... Плиз))

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

Борис К,
читайте https://learn.javascript.ru/event-delegation

Борис К,

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
   .active{
     border: 5px #0000FF solid;
   }
   .hide{
     display: none;
   }

  </style>
</head>
<body>

<table id="content">
<tr>
<td><img src="https://www.toptal.com/designers/subtlepatterns/patterns/congruent_outline.png" width="150"></td><td><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSt_IzMTuDrclTeTYtP0QHnsjQaua7lhdlPwCxjW_sEnFLJlmWL" width="150"></td>
</tr>
<tr>
<td><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSt_IzMTuDrclTeTYtP0QHnsjQaua7lhdlPwCxjW_sEnFLJlmWL" width="150"></td><td><img src="https://www.toptal.com/designers/subtlepatterns/patterns/congruent_outline.png" width="150"></td>
</tr>
</table>
<script>
window.addEventListener("DOMContentLoaded", function() {
    var content = document.querySelector("#content"),
        a;
    content.addEventListener("click", function(event) {
        var img = event.target;
        if ("IMG" == img.tagName)
        if (!a) {
                a = img;
                img.classList.add("active")
            }
        else if (a != img && a.src == img.src) {
            img.classList.add("hide");
            a.classList.add("hide");
            a.classList.remove("active");
            a = null
            }
        else {
            a.classList.remove("active");
            a = img;
            img.classList.add("active")
        }
    })
});
</script>

</body>

Профессор Рони... Учитель!
Огромное спасибо за помощь!!! Обещаю изучать JS с мыслями о Вас...
Вы - настоящий Мужчина! Не знаю где Вы живёте, но сегодня 23 февраля... с Праздником Вас!!!
А мне это лучший подарок от Высокопрофессионального Незнакомца в завтрашний ДР...
Искренне желаю Вам Успехов и Побед во всех начинаниях!
С Уважением,
Борис К.