Итак, у меня возникли небольшие проблемы с пониманием JQuery и того, как выполнять функцию «Показать больше». Вот мой HTML-файл, над которым я работаю, из книги Murach JQuery.

<main id="jdom">
    <h1>Murach's JavaScript and DOM Scripting</h1>
    <h2>Book description</h2>
    <div>
        <p>You can read other JavaScript books from start to finish and still not
        know how to develop dynamic websites like you want to. That's because 
        it's DOM scripting that lets you do things like run slide shows, handle image
        rollovers, rotate headlines, provide animation, and more. And it's a subject 
        that's glossed over or ignored in most other books.</p>
    </div>
    <div class="hide">
        <p>But now, you can go from JavaScript beginner to DOM scripting expert in a 
        single book! Fast-paced, professional, and packed with expert practices, our 
        new JavaScript book guides you through each step as you learn how to program 
        sites that enhance the user experience and ensure browser compatibility.</p>
    </div>
    <a href="#">Show more</a>

Вот JQuery, с которым я работаю

$(document).ready(function() {
   $("a").click(function() {
      $(this).toggleClass("hide");
       if ($(this).attr("class") != "hide") {
            $(this).next().hide();
       }
       else {
           $(this).next().show();
       }

   });

});

Итак, у меня возникли небольшие проблемы с обнаружением ошибки в коде. Если я неправильно перетащил класс hide в метод classToggle. Любая помощь с более глубоким пониманием того, где я ошибаюсь, была бы очень признательна!

1
Suliman Sharif 26 Фев 2016 в 20:05

2 ответа

Лучший ответ

Вы ссылаетесь не на тот элемент, который нужно скрыть. Это распространенная ошибка, но я думаю, вы можете немного запутаться в том, что означает this. Внутри функции события клика this относится к элементу <a>, на который был произведен щелчок. Таким образом, обращение к $(this) и переключение класса .hide - это не то, что вы хотите.

Я предполагаю, что вы хотите скрыть элемент, который уже имеет класс .hide. Итак, вам нужно выбрать его в своем обработчике событий. Вы можете использовать связь между выбранным элементом <a>, $(this) и его братьями и сестрами, чтобы выбрать правильный <div>. У вас может быть более одного описания книги с классом .hide, поэтому вы хотите показать только родственное описание, а не все из них.

$('a').click(function() {
  var $element = $(this).siblings('div.hide');
  $element.show();
});

У меня есть несколько неясных вопросов:

  • Нужно ли удалять класс hide из элемента? Неясно, скрывают ли правила CSS элемент или jQuery.
  • Скажем, я хотел снова скрыть элемент, но класс скрытия был удален. Как бы вы его легко выбрали? Возможно, удаление класса - не лучший вариант.
1
Brett 26 Фев 2016 в 17:31

Основная проблема заключается в том, что вы выполняете некоторые операции jquery внутри обработчика кликов на $ (this). Вызов $ (this) внутри другой функции jquery всегда относится к элементу, для которого он был первоначально вызван.

Поэтому, когда вы вызываете $(this).toggleClass("hide"), вы переключаете класс скрытия на элемент a. Я предполагаю, что вы действительно хотели переключить класс в div с дополнительным контентом. Чтобы добиться этого как можно более близким к тому, что вы сделали в предоставленном вами коде, вы должны вызвать $(this).prev().toggleClass("hide").

Вам также следует заменить вызовы .next () на .previous (), потому что div, который вы хотите показать / скрыть, является предыдущим элементом DOM (по отношению к элементу a), а не следующим.

Вот рабочая скрипка с небольшими изменениями в предоставленном вами коде: https://jsfiddle.net/49b9mL2q/

И вот один с немного большим упрощением: https://jsfiddle.net/2w48cg1x/

Удачи в изучении jQuery и продолжайте!

1
glutengo 18 Июл 2017 в 15:29