Перевести функцию javascript в JQuery

У меня есть следующий функция, который я использовал для скрытие и отображение соответствующих страниц на основе различных нажатий кнопок. Теперь я использую JQuery и хочу иметь возможность делать то же самое, но только с JQuery. Должно быть, что-то не так, потому что это не работает.

function showPages() {

    var aBtnShowPages = document.getElementsByClassName("btnShowPage");
    // this is an array
    for (var i = 0; i < aBtnShowPages.length; i++) {

        aBtnShowPages[i].addEventListener("click", function () {
            //console.info( "WORKS" ); 
            // Hide the pages
            var aPages = document.getElementsByClassName("page");
            for (var j = 0; j < aPages.length; j++) {
                aPages[j].style.display = "none";
            }

            var sDataAttribute = this.getAttribute("data-showThisPage");
            //console.info( sDataAttribute );
            document.getElementById(sDataAttribute).style.display = "flex";
        });

    }

}

Версия JQuery:

  function showPages() {

        let $aBtnShowPages = $(".btnShowPage");
        // this is an array
        for (let i = 0; i < $aBtnShowPages.length; i++) {

            $aBtnShowPages[i].click(function () {

                //console.info("WORKS");
                // Hide the pages
                let $aPages = $('.page');
                for (let j = 0; j < $aPages.length; j++) {
                    $aPages[j].hide();
                }

                let $sDataAttribute = $(this).attr("data-showThisPage");
                //console.info( $sDataAttribute );
                $(sDataAttribute).show();
            });

        }

    }

Вы можете найти подходящие методы на сайте api.jquery.com или learn.jquery.com. $() и on() и css() и attr() или prop(), чтобы назвать несколько.

— 25.04.2018 19:15

посмотрите это w3schools.com/jquery/jquery_hide_show.asp

— 25.04.2018 19:18

Я пробовал, выглядит хорошо? См. Мою правку выше.

— 25.04.2018 19:49

Не существует такой вещи, как «просто jQuery». jQuery - это просто библиотека Javascript; даже в вашем переведенном примере есть Javascript.

— 25.04.2018 19:50

верно. Я понял, что.

— 25.04.2018 19:52

Возможный дубликат array.eq () против array [] в Javascript и Jquery

— 25.04.2018 20:16

$aPages[j] возвращает DOMElement, а не набор результатов jQuery. А у DOMElement нет функции hide. Вам нужно использовать eq()

— 25.04.2018 20:16

javascript jquery

25.04.2018 19:10

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Ответы 1

Это показывает, как переключаться между значениями «ложь» и «истина». Довольно многословно и может быть просто одной функцией, использующей вместо этого .toggle(true).

Я добавил фальшивую разметку, так как вы ее не предоставили.

$(function() {
  $(".btnShowPage").on("click", function() {
    let $aPages = $('.page');
    $aPages.hide();
    $aPages.filter(function() {
      return $(this).data("showThisPage") == true;
    }).show();
  }).trigger('click'); // set initial state ;
  $(".btnHidePage").on("click", function() {
    let $aPages = $('.page');
    $aPages.show();
    $aPages.filter(function() {
      return $(this).data("showThisPage") == true;
    }).hide();
  });
});

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class = "page" data-show-this-page = "true">showme1</div>
<div class = "page" data-show-this-page = "true">showme2</div>
<div class = "page" data-show-this-page = "true">showme3</div>
<div class = "page" data-show-this-page = "false">showme4</div>
<div class = "page" data-show-this-page = "true">showme5</div>
<div class = "page" data-show-this-page = "true">showme6</div>
<button id = "showem" class = "btnShowPage" type = "button">showem</button>
<button id = "hideem" class = "btnHidePage" type = "button">hideem</button>

Просто покажите тем, у кого есть настоящий набор.

$(function() {
  $(".btnShowPage").on("click", function() {
    // just show those with true set
    $('.page').each(function(index) {
      let showme = $(this).data("showThisPage") == true;
      $(this).toggle(showme);
    });
  }).trigger('click'); // set initial state ;
});

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class = "page" data-show-this-page = "true">showme1</div>
<div class = "page" data-show-this-page = "true">showme2</div>
<div class = "page" data-show-this-page = "true">showme3</div>
<div class = "page" data-show-this-page = "false">showme4</div>
<div class = "page" data-show-this-page = "true">showme5</div>
<div class = "page" data-show-this-page = "true">showme6</div>
<button id = "showem" class = "btnShowPage" type = "button">showem</button>

Показать только целевой элемент и скрыть / показать все:

$(function() {
  $(".btnShowPage").on("click", function() {
    // just show those with the target
    let showTarget = $(this).data("target");
    switch (showTarget) {
      case -1:
        $('.page').hide();
        break;
      case "all":
        $('.page').show();
        break;
      default:
        $('.page').eq(showTarget).toggle(true);
    }
  });
});

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class = "page">showme0</div>
<div class = "page">showme1</div>
<div class = "page">showme2</div>
<div class = "page">showme3</div>
<div class = "page">showme4</div>
<div class = "page">showme5</div>
<div class = "page">showme6</div>
<button id = "showem" class = "btnShowPage" type = "button" data-target = "all">showem all</button>
<button id = "showem" class = "btnShowPage" type = "button" data-target = "1">showem 1</button>
<button id = "showem" class = "btnShowPage" type = "button" data-target = "2">showem 2</button>
<button id = "showem" class = "btnShowPage" type = "button" data-target = "5">showem 5</button>
<button id = "showem" class = "btnShowPage" type = "button" data-target = "-1">hide all</button>

25.04.2018 20:37

Другие вопросы по теме

Нажатие и выталкивание значений для каждого нажатия кнопки

Jquery каждый цикл повторяется только один раз для динамически созданного элемента <td>

Массив внутри объекта внутри массива в jQuery

Повторяющиеся входные данные при добавлении с использованием jQuery

Воспроизвести звук при обнаружении маркера A-frame AR.JS

Невозможно заставить работать динамически созданные флажки

Создание массива ключей в jQuery

JQuery применяет выбранное значение из одной формы в другую

Ошибка TS2304: не удается найти $ в компоненте angular 5

Изменить идентификатор div / класс onclick

Перевести функцию javascript в JQuery

Ответы 1

Другие вопросы по теме

Похожие вопросы