прочитайте больше проблем с кнопками для раздела новостей с jquery

Question

Я пытаюсь создать страницу с новостями, точно так же, как сообщения в блоге, и я получаю новости с помощью php, и я хочу ограничить количество символов для новостей и показать ссылку "читать дальше".Когда пользователь нажимает «читать дальше», он должен отображать весь контент и кнопку «Скрыть».Когда пользователь нажимает кнопку скрыть, он должен скрыть содержимое и отобразить исходное состояние.Проблема, с которой я сталкиваюсь, заключается в том, что, когда я нажимаю кнопку «Читать подробнее» на новостях, он создает скрытые ссылки на другие элементы сообщений, а также показывает содержимое других новостей.

Я разместил свое решение на Fiddle, поскольку в нем много строк.кода.Если я не предоставил весь код, пожалуйста, расскажите, потому что это мой первый пост на Fiddle.http://jsfiddle.net/wqXPg

Answer 1

При создании плагина вы должны следовать рекомендациям, которые установила команда JQuery .

Гораздо проще поддерживать, проверять и понимать код в четкой области, напримеркак внутри одной четко определенной функции.«Перепрыгивание» вокруг функций и передача параметров везде беспорядочно и может привести к появлению спагетти-кода.

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

Я сделал этот пример Вы можете учиться и учиться у.

Answer 2

В некоторых областях плагина вы используете метод find () для сохранения области действия в отдельном модуле новостей, в других вы используете всю коллекцию класса, которая находится на странице

Прекрасный пример: вы начинаете с цикла внизу для вызова init () и передаете каждый элемент в качестве аргумента init (), но затем он не используется, и вы привязываете обработчик clcik к каждому a.readmore на странице.

Больше такого рода контекста поможет. Обратите внимание на p.find ()

 init: function(config, p){
        $.extend(this.config, config);
        this.createSubString(p);
        p.find('a.read-more').on('click', news.show);
    }

Также внимательно посмотрите на использование news.container. Это каждый контейнер на странице с этим классом