Я хочу, чтобы мои кнопки переключались между 2 стилями определенного элемента, например h1, при нажатии, но кнопка просто исчезала - PullRequest
Новая
       0

Я хочу, чтобы мои кнопки переключались между 2 стилями определенного элемента, например h1, при нажатии, но кнопка просто исчезала

1 голос
/ 29 апреля 2020

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

    <body>
        <h1>Hello</h1>
        <button>Click Me</button>
        <button>Click Me</button>
        <button>Click Me</button>
        <button>Click Me</button>
        <button>Click Me</button>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="index.js" charset="utf-8"></script>
      </body>


    //this is the js code. the buttons simply disappear when I reload the page

    $("button").toggle(function() {
        /* Stuff to do every *odd* time the element is clicked */
        $("h1").css("color","purple");
      }, function() {
        /* Stuff to do every *even* time the element is clicked */
        $("h1").css("color","yellow");
      });

1 Ответ

1 голос
/ 29 апреля 2020

Метод toggle () переключает между hide () и show () для выбранных элементов. То, что вы делаете, это эффективно скрывает кнопки загрузки. Вам нужно изменить скрипт на что-то вроде этого. 

   <script>
      let flag=true;
      $("button").click(function() {
          /* Stuff to do every *odd* time the element is clicked */
          flag ? $("h1").css("color","purple"): $("h1").css("color","yellow");
          flag=!flag;
        });
    </script>

Или вы можете попробовать переключить класс. Определите два класса, скажем, фиолетовый и желтый. Примените фиолетовый цвет в узле как 

<h1 class="purple">Hello</h1>

Затем в сценарии 

<script>
      $("button").click(function(){
      $("h1").toggleClass('yellow');
});
</script>

Это также будет работать

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

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

...