проблема со стандартным флажком и изображением - PullRequest
Новая
       0

проблема со стандартным флажком и изображением

1 голос
/ 30 января 2020

Вопрос:

почему я не вижу изображения, появляющегося при нажатии на флажок?

Проблема:

Я не получаю ошибок с Inspect Tools. Кто-нибудь видит что-то, чего мне не хватает? Спасибо. 

<!DOCTYPE html>
<html lang="en" dir="ltr">
   <head>
    <meta charset="utf-8">
    <title></title>
    <style>
        #your_img {
       display: none;
        }

    </style>
    <script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>

    <script type="text/javascript">
        $('#show_image').on("click", function() {
          if ($('#your_img').is(':hidden')) {
            $('#your_img').show();
          } else {
            $('#your_img').hide();
          }
        });
    </script>

    </head>
    <input type="checkbox" id="show_image">Show Image</input>
    <div id="your_img">
    <img src="https://saltwx.com/images/chloro/chloro_bar.png" alt="A image" style="height: 
    485px;width:71px">
    </div>
    <body>

</body>
</html>

Ответы [ 3 ]

3 голосов
/ 30 января 2020

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

<!DOCTYPE html>
<html lang="en" dir="ltr">
   <head>
    <meta charset="utf-8">
    <title></title>
    <style>
        #your_img {
       display: none;
        }

    </style>
    <script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>


    </head>
    <input type="checkbox" id="show_image">Show Image</input>
    <div id="your_img">
    <img src="https://saltwx.com/images/chloro/chloro_bar.png" alt="A image" style="height: 
    485px;width:71px">
    </div>
    <body>

    <script type="text/javascript">
        $('#show_image').on("click", function() {
          if ($('#your_img').is(':hidden')) {
            $('#your_img').show();
          } else {
            $('#your_img').hide();
          }
        });
    </script>
</body>
</html>
0 голосов
/ 30 января 2020

Пожалуйста, добавьте элементы div и код логики c в разделе body. Весь код logi c размещается перед концом раздела body. Последний раздел скрипта, содержащий ваши логи c, компилируется после того, как dom готов.

Вы можете использовать приведенный ниже код. Надеюсь, это поможет !!! 

   <!DOCTYPE html>
    <html lang="en" dir="ltr">
       <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            #your_img {
           display: none;
            }

        </style>
        <script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
        </head>
        <body>
          <input type="checkbox" id="show_image">Show Image</input>
          <div id="your_img">
          <img src="https://saltwx.com/images/chloro/chloro_bar.png" alt="A image" style="height: 
        485px;width:71px">
        </div>
          <script type="text/javascript">
            $('#show_image').on("click", function() {
              if ($('#your_img').is(':hidden')) {
                $('#your_img').show();
              } else {
                $('#your_img').hide();
              }
            });
          </script>
        </body>
    </html>
0 голосов
/ 30 января 2020

Я вижу явную ошибку с тегом body! Вы открыли его после всего div и прочее. Вот фиксированный код: 

<!DOCTYPE html>
<html lang="en" dir="ltr">
   <head>
    <meta charset="utf-8">
    <title></title>
    <style>
        #your_img {
       display: none;
        }

    </style>
    <script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>

    <script type="text/javascript">
        $('#show_image').on("click", function() {
          if ($('#your_img').is(':hidden')) {
            $('#your_img').show();
          } else {
            $('#your_img').hide();
          }
        });
    </script>

    </head>
    <body>
        <input type="checkbox" id="show_image">Show Image</input>
        <div id="your_img">
        <img src="https://saltwx.com/images/chloro/chloro_bar.png" alt="A image" style="height: 
        485px;width:71px">
        </div>

    </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...