Как скрыть div при втором клике с помощью JavaScript - PullRequest
Новая
       143

Как скрыть div при втором клике с помощью JavaScript

0 голосов
/ 02 ноября 2019

У меня есть маленький скрипт, который показывает мой div при первом нажатии, но я хочу, чтобы он скрывался при повторном нажатии!

У меня неверное утверждение if...else? 

<a onClick='view()'>OTHER HTML CONTENT</a>
<div id="a" class="superHide"><img class="alignnone size-full wp-image-940 imgWrap" src="http://boxingclever.net.au/wp-content/uploads/2019/10/iagLogo_300px.jpg" alt="" width="150" height="125" />
<img class="alignnone size-full wp-image-940 imgWrap" src="http://boxingclever.net.au/wp-content/uploads/2019/10/TelstraLogo_300px.jpg" alt="" width="150" height="125" />
<img class="alignnone size-full wp-image-940 imgWrap" src="http://boxingclever.net.au/wp-content/uploads/2019/10/FootballFedAus_300px.jpg" alt="" width="150" height="125" />
<img class="alignnone size-full wp-image-940 imgWrap" src="http://boxingclever.net.au/wp-content/uploads/2019/10/pngLng_300px.jpg" alt="" width="150" height="125" />
<img class="alignnone size-full wp-image-940 imgWrap" src="http://boxingclever.net.au/wp-content/uploads/2019/10/NRMA_300px.jpg" alt="" width="150" height="125" />
<img class="alignnone size-full wp-image-940 imgWrap" src="http://boxingclever.net.au/wp-content/uploads/2019/10/BupaLogo_300px.jpg" alt="" width="150" height="125" /></div>

<script>
function view() {
var testMe=document.getElementById('a').getAttribute('display');
  if(testMe=='block'){
        document.getElementById('a').setAttribute('style', 'display:none');
  } else{
        document.getElementById('a').setAttribute('style', 'display:block');
  }
}
</script>

.superHide {
    display:none;
}

Ответы [ 3 ]

0 голосов
/ 02 ноября 2019

Это должно сработать, я скопировал ваш HTML и применил JS, как вам нужно. Вы заметите, что onClick='view(this, "a")' предоставляет элемент функции 

<a onClick='view(this, "a")'>OTHER HTML CONTENT</a>
<div id="a" class="superHide"><img class="alignnone size-full wp-image-940 imgWrap" src="http://boxingclever.net.au/wp-content/uploads/2019/10/iagLogo_300px.jpg" alt="" width="150" height="125" />
<img class="alignnone size-full wp-image-940 imgWrap" src="http://boxingclever.net.au/wp-content/uploads/2019/10/TelstraLogo_300px.jpg" alt="" width="150" height="125" />
<img class="alignnone size-full wp-image-940 imgWrap" src="http://boxingclever.net.au/wp-content/uploads/2019/10/FootballFedAus_300px.jpg" alt="" width="150" height="125" />
<img class="alignnone size-full wp-image-940 imgWrap" src="http://boxingclever.net.au/wp-content/uploads/2019/10/pngLng_300px.jpg" alt="" width="150" height="125" />
<img class="alignnone size-full wp-image-940 imgWrap" src="http://boxingclever.net.au/wp-content/uploads/2019/10/NRMA_300px.jpg" alt="" width="150" height="125" />
<img class="alignnone size-full wp-image-940 imgWrap" src="http://boxingclever.net.au/wp-content/uploads/2019/10/BupaLogo_300px.jpg" alt="" width="150" height="125" /></div>


function view(item, targetId) {
    if(item.dataset.clickCount == undefined) { item.dataset.clickCount = 0 }
    item.dataset.clickCount = Number(item.dataset.clickCount) + 1

    let displayFormat = ['block', 'none'][item.dataset.clickCount % 2]
    let displayStyle = `display:${displayFormat}`

    document.getElementById(targetId).setAttribute('style', displayStyle);
}

</script>

Я копаю ваш сырой вкус, поэтому я продолжил использовать встроенную функциональность.

Хитрость здесь в том, чтобы перевернуть модуль по модулю в элементе. Сначала я применил счетчик к dataset на элементе, затем увеличивал clickCount на каждом клике. dataset естественно хранится как строковый тип, поэтому я конвертирую его, чтобы убедиться, что математические значения увеличиваются.

Затем, используя модуль % 2, количество кликов изменяется между 0 и 1. Это позволяет очистить строку и сохранить повторение.

Для последнего трюка укажите идентификатор узла target из элемента щелчка. Теперь эта функция будет на любом кликаемом предмете против любой цели без изменений кода.

Надеюсь, это поможет.

0 голосов
/ 02 ноября 2019

Ваше изображение не видно, т. Е. Используемое вами изображение неверно.

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

Похоже, ваше изображение не отображаетсяпоказано здесь.

так что даже по вашему вопросу скрипт будет работать нормально.

Но проблема на самом деле в другом. Ваши изображения не загружаются.

Я приложил причину, по которой ваши изображения здесь не показываются.

Reason your images not loading

function view() {
var testMe=document.getElementById('a').style.display;
console.log(testMe);
  if(testMe=='none' || testMe == ''){
        document.getElementById('a').style.display = 'block';
  } else{
        document.getElementById('a').style.display = 'none';
  }
}
.superHide {
    display:none;
}
<a onClick='view()'>OTHER HTML CONTENT</a>
<div id="a" class="superHide"><img class="alignnone size-full wp-image-940 imgWrap" src="http://boxingclever.net.au/wp-content/uploads/2019/10/iagLogo_300px.jpg" alt="" width="150" height="125" />
<img class="alignnone size-full wp-image-940 imgWrap" src="http://boxingclever.net.au/wp-content/uploads/2019/10/TelstraLogo_300px.jpg" alt="" width="150" height="125" />
<img class="alignnone size-full wp-image-940 imgWrap" src="http://boxingclever.net.au/wp-content/uploads/2019/10/FootballFedAus_300px.jpg" alt="" width="150" height="125" />
<img class="alignnone size-full wp-image-940 imgWrap" src="http://boxingclever.net.au/wp-content/uploads/2019/10/pngLng_300px.jpg" alt="" width="150" height="125" />
<img class="alignnone size-full wp-image-940 imgWrap" src="http://boxingclever.net.au/wp-content/uploads/2019/10/NRMA_300px.jpg" alt="" width="150" height="125" />
<img class="alignnone size-full wp-image-940 imgWrap" src="http://boxingclever.net.au/wp-content/uploads/2019/10/BupaLogo_300px.jpg" alt="" width="150" height="125" /></div>
0 голосов
/ 02 ноября 2019

При получении атрибутов вы хотите напрямую ссылаться на свойство style в элементе DOM, а не пытаться использовать метод получения. Я считаю, что геттер работает, только если стиль встроен прямо в HTML. Если стиль установлен через CSS, он будет содержаться только в этом реквизите. Ваш получатель всегда возвращал ноль. Так как null == 'block' возвращает false, блок отображения всегда запускался. Примерно так будет работать: 

function view() {
  var target = document.getElementById('a');
  var shown = target.style.display === 'block;
  target.setAttribute('style', `display:${shown ? 'none' : 'block'}`);
}
...