Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.01.2019, 10:30
Аспирант
Отправить личное сообщение для phoenix200689 Посмотреть профиль Найти все сообщения от phoenix200689
 
Регистрация: 02.11.2016
Сообщений: 31

Возможно ли упростить/оптимизировать скрипт?
Приветствую!
Есть html-код и скрипт.
Со стилями сложнее, поэтому их нет (sorry).

<ul class="top-models__list-pros">
  <li class="pros">
    <div class="icon icon--pros"><span class="sign"></span></div>
    <div class="text" style="display: none;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ullamcorper, velit vitae lacinia tristique, diam neque tincidunt sapien</div>
  </li>
  <li class="cons cons--active">
    <div class="icon icon--cons"><span class="sign"></span></div>
    <div class="text" style="display: none;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ullamcorper, velit vitae lacinia tristique</div>
  </li>
  <li class="recomend">
    <div class="icon icon--recomend icon--active"><span class="sign"></span></div>
    <div class="text" style="display: inline-block;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ullamcorper, velit vitae lacinia tristique, diam neque tincidunt sapien</div>
  </li>
</ul>


Скрипт работает, переключает вкладки.

Вопрос: возможно ли упростить скрипт, избавиться от вложенности?

$( document ).ready( () => {
    $('ul.top-models__list-pros > li').each(function() {
        $(this).find('div.icon').each(function() {
            $(this).on('click', function() {
                $(this).addClass('icon--active')
                    .closest('li')
                    .siblings()
                    .find('.icon')
                    .removeClass('icon--active');
            });
        });
    });
});


Заранее, спасибо за идеи!
Ответить с цитированием
  #2 (permalink)  
Старый 09.01.2019, 10:45
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,733

$(() => {
    $('ul.top-models__list-pros > li div.icon').click(function() {
        $(this).addClass('icon--active')
            .closest('li')
            .siblings()
            .find('.icon--active')
            .removeClass('icon--active');

    });
});
Ответить с цитированием
  #3 (permalink)  
Старый 09.01.2019, 11:28
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,072

phoenix200689,
$(() => {
    let temp = $('ul.top-models__list-pros .icon--active');
    $('ul.top-models__list-pros').on('click', '.icon', function(){
      temp.removeClass('icon--active');
      temp = $(this).addClass('icon--active');
    });
});
Ответить с цитированием
  #4 (permalink)  
Старый 09.01.2019, 14:40
Аспирант
Отправить личное сообщение для phoenix200689 Посмотреть профиль Найти все сообщения от phoenix200689
 
Регистрация: 02.11.2016
Сообщений: 31

Nexus,
рони,
Гениально, спасибо
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Один скрипт мешает другому функционировать Takishon jQuery 11 15.03.2015 19:53
Скрипт отслеживающий подгрузку контента на страницу. psqs Events/DOM/Window 2 23.01.2012 21:29
помогите доработать скрипт Medvedoc Javascript под браузер 0 18.10.2011 16:09
Не работает скрипт :( VladimirV Javascript под браузер 5 21.12.2010 14:26
Как украсть скрипт? bayah Общие вопросы Javascript 6 26.04.2010 10:32