Скрыть изображение при клике - PullRequest
Новая
       1

Скрыть изображение при клике

0 голосов
/ 22 февраля 2020

Я пытался скрыть изображение при нажатии, чтобы я мог щелкнуть тег, чтобы показать его и скрыть

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

<body>
 <a href="#" class="nebulae">nebulae</a>
<div class="col-md-4 first"></div>
<body>

$('.nebulae').click(function(e) {
    const img = '<img src="nebulae.jpg" class="rounded float-left">';
    $('<img src="nebulae.jpg" class="rounded float-left">').appendTo(".first");
    if(img) {
        $('html, body').animate({
            scrollTop: $(".first").offset().top
        }, 1000);
    }else{
    }
})

Я пробовал это 

if(img) {
        $('html, body').animate({
            scrollTop: $(".first").offset().top
        }, 1000).on( "click", $(this).find( $(this) ));
    }else{
        $('html, body').animate({
            scrollTop: $(".first").offset().top
        }, 1000).off( "click", $(this).hide( $(this) ));
    }

, но тоже не работает

Ответы [ 2 ]

1 голос
/ 22 февраля 2020

Самый простой способ отобразить или скрыть изображение, щелкнув другой элемент в DOM, - выполнить следующие действия. Попробуйте. 

$(".nebulae").on("click", function () {
  $(".first").toggle();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" class="nebulae">nebulae</a>
<div class="col-md-4 first">
  <img src="https://icatcare.org/app/uploads/2018/07/Thinking-of-getting-a-cat.png" />
</div>
0 голосов
/ 22 февраля 2020

Я рекомендую, не загружайте изображение снова и снова. Поместите это изображение в div в HTML и просто отобразите / скройте при нажатии кнопки 

 <body>
   <a href="#" class="nebulae">nebulae</a>
   <div class="col-md-4 first">
    <img src="nebulae.jpg" class="rounded float-left" />
   </div>
 <body>


$('.nebulae').click(function(e) {
 if($(this).hasClass('active')){
    $(".first").hide();
    $(this).removeClass('active');
  }
  else{
     $(".first").show();
      $('html, body').animate({
        scrollTop: $(".first").offset().top
    }, 1000);
    $(this).addClass('active');
  }
 })

// или если вам нужно загрузить изображение после события нажатия 

 <body>
   <a href="#" class="nebulae">nebulae</a>
   <div class="col-md-4 first">

   </div>
 <body>


$('.nebulae').click(function(e) {
 if($(this).hasClass('active')){
    $(".first").html('');
    $(this).removeClass('active');
  }
  else{
     $(".first").html('<img src="nebulae.jpg" class="rounded float-left" />');
      $('html, body').animate({
        scrollTop: $(".first").offset().top
    }, 1000);
    $(this).addClass('active');
  }
 })
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...