Изображение видимость одна

Question

У меня есть несколько изображений с: visibility:hidden и событием onClick, которое устанавливает его видимость на visible. Изображения имеют идентификатор Img_(somenumber)

Как сделать так, чтобы, когда одно изображение было видно, все остальные были скрыты?

Answer 1

Есть множество способов сделать это.Я уверен, что вам захочется больше обдумать это.НО, за ответ без jQuery.Добавьте это как ваш обработчик onClick.Обязательно передайте ключевое слово this.

<img onclick="toggleVisible(this);" src="" />

Включите эту функцию где-нибудь на своей странице:

function toggleVisible(clickedLI) {
    var imgs = document.getElementsByTagName('img');
    var i = imgs.length;
    while (i--) {
        var img = imgs[i];
        if (img.id.indexOf('Img_' == 0)) { 
            img.style.visibility = img.parentNode == clickedLI ? 'visible' : 'hidden';
        }
    }
}

Первая проблема, с которой вы столкнетесь, заключается в том, что нет способа вернутьскрытые изображения.Они находятся там, занимая место в документе, но они не будут реагировать на события щелчка (по крайней мере, в Chrome). Подумайте о том, чтобы дать больше деталей в своем вопросе.Как сказал Андреас, если у вас много изображений, есть более эффективные способы.

Answer 2

Используя jquery, вы можете попробовать следующее:

• Добавьте класс к набору изображений, которым вы хотите управлять их видимостью. например

Затем для каждого изображения вы можете выполнить следующее для события onclick:

<img src="{img_src}" class="myImages" onclick="$('img.myImages').hide(); $(this).show();" />

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

Если вы не можете сделать это (большое количество изображений), попробуйте использовать функцию, которая будет срабатывать при загрузке документа и добавлять обработчик для события «onclick» каждого изображения. Опять же, это легко сделать с помощью jquery или другой библиотеки js.