Javascript Показать / скрыть картинки

javascript

42 просмотра

2 ответа

10 Репутация автора

Как удалить (скрыть) изображения, когда определенные изображения отображаются на основе их идентификаторов. Это то, что я получил так далеко:

function setImageinVisible(id) {
    var img = document.getElementById(id);
    img.style.visibility = 'visible';
}
Автор: Emloy Источник Размещён: 19.07.2016 07:09

Ответы (2)


0 плюса

1375 Репутация автора

Решение

Во-первых, хорошая практика гласит, что вам не следует напрямую связываться со стилями объекта, а переключать его классы (из-за https://en.wikipedia.org/wiki/Separation_of_concerns ). Мой совет, чтобы создать государственный класс, как

.is-hidden {
  display: none;
}

а затем просто переключите этот класс на конкретный элемент с помощью jquery, чистого JS или чего-то еще, например.

$('.my-image').addClass('is-hidden') // to hide
$('.my-image').removeClass('is-hidden') // to show

с чистым JS:

document.querySelector('.my-image').classList.add('is-hidden')
document.querySelector('.my-image').classList.remove('is-hidden')

ОБНОВИТЬ:

Чтобы сбросить предыдущее состояние (установить все изображения как скрытые), прежде чем показывать одно:

// to add.is-hidden from every image (to hide all the images)
[].map.call(document.querySelectorAll('img'), function(el) {
    el.classList.add('is-hidden');
});
// to show choosen image
document.querySelector('.my-image').removeClass('is-hidden')
Автор: Oskar Szura Размещён: 19.07.2016 07:12

-1 плюса

1 Репутация автора

Примечание: toggle-vader-button, ("#Vader")и ("#Palpatine")все они основаны на проекте я работаю. Подставьте идентификаторы ваших фотографий в

$ (document).ready(function() {
    $("#toggle-vader-button").on("click", function () {
        $("#Vader").toggle();
        $("#Palpatine").toggle();
    });
});

Как один выключен, другой включен. Также обратите внимание на то, что у меня в шаблоне Palpatine отображается «none», поэтому он включается, пока Vader отключается. Оба будут занимать одно и то же место.

Автор: Sobadatthis Размещён: 23.01.2017 07:28
Вопросы из категории :
32x32