Подскажите пожалуйста, как создать тумблер из изображения? - PullRequest
0 голосов
/ 24 сентября 2018

Я хочу несколько изображений в окне.Когда я нажимаю на изображение, я хочу отключить показ некоторой информации.Я хочу это на всех моих изображениях.

1 Ответ

0 голосов
/ 24 сентября 2018

Вы не опубликовали используемые вами технологии, поэтому я предполагаю, что вы используете jQuery и html:

Вот пример HTML:

<div>
  <img class="img" data-imgid="img1" src="https://i2.wp.com/beebom.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg?w=640&ssl=1" width="200px" />
  <br/>
  <text style="display:none;" id="img1">Image1 ......</text>
  <br/><br/>
  <img class="img" data-imgid="img2" src="http://www.111ideas.com/wp-content/uploads/2018/01/download-rose-image.jpg" width="200px" />
  <br/>
  <text style="display:none" id="img2" class="text" hide>Image2 </text>
  <br/><br/>
  <img class="img" data-imgid="img3" src="https://processing.org/tutorials/pixels/imgs/tint1.jpg" width="200px" />
  <br/>
  <text style="display:none" id="img3" class="text" hide>Finally Image3 :)</text>
</div>

, а вотКод jQuery, который обрабатывает процесс переключения. Вам нужно использовать метод переключения на основе идентификатора любого текстового тега в HTML-коде внутри функции onclick, чтобы переключать его:

$(function () {
            $('.img').on('click', function () {
                var txtId = $(this).attr('data-imgid');
                $('#' + txtId).toggle();
            });                   
    });

Вы можете увидеть живую демонстрацию здесь: http://jsfiddle.net/gtU56/342/

...