2

Мне необходимо добавлять класс к одному из элементов, которые содержат один и тот же класс.

    $('.dashboard__works-todo-active, .dashboard__works-more-button').click(function() {
        if ($('.dashboard__works-more').hasClass('dashboard__works-more-active')){
            setTimeout(function() {
                $('.dashboard__works-more').removeClass('dashboard__works-more-active');
            }, 200);
            $('.dashboard__works-more').css("opacity","0");
        } else {
            setTimeout(function() {
                $('.dashboard__works-more').css("opacity","1");
            }, 200);
            $('.dashboard__works-more').addClass('dashboard__works-more-active');
        }
    });
.dashboard__works-more{
    opacity: 0;
    display: none;
}

.dashboard__works-more-active{
    display: flex;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
           <div class="dashboard__works-todo">
                <a href="javascript: void 0;" class="dashboard__works-todo-active">Get 3 Quotes</a>
            </div>
            <div class="dashboard__works-more">
                <div class="dashboard__works-more-left">
                    <div class="dashboard__works-more-text">Lorem Lorem Lorem</div>
                </div>
                <div class="dashboard__works-more-right">
                    <a href="javascript: void 0;" class="dashboard__works-more-button">
                    Close
                    </a>
                </div>
            </div>
            
                       <div class="dashboard__works-todo">
                <a href="javascript: void 0;" class="dashboard__works-todo-active">Get 3 Quotes</a>
            </div>
            <div class="dashboard__works-more">
                <div class="dashboard__works-more-left">
                    <div class="dashboard__works-more-text">Lorem Lorem Lorem</div>
                </div>
                <div class="dashboard__works-more-right">
                    <a href="javascript: void 0;" class="dashboard__works-more-button">
                      Close
                    </a>
                </div>
            </div>

Подскажите как можно оптимизировать этот код чтобы он работал? Всем заранее спасибо за любую помощь!!!

6
  • А в чём проблема?
    – doox911
    28 дек 2019 в 17:14
  • Проблема в том, что этот код добавляет класс dashboard__works-more-active ко всем элементам класса dashboard__works-more, а мне нужно чтобы только к одному
    – Daniil Lav
    28 дек 2019 в 17:17
  • Повесь на див id о присвой ему класс. 28 дек 2019 в 17:45
  • У меня таких элементов много будет (например от 2 до 100), мне нужно чтобы это работало без добавления лишних id и классов, так как вешать 100+ id не имеет смысла
    – Daniil Lav
    28 дек 2019 в 17:46
  • Я могу показать как это сделать на ванильном js, если вас устроит.
    – user355286
    28 дек 2019 в 17:57

2 ответа 2

4

document.body.addEventListener('click', function(e) {
  if (e.target.classList.contains('dashboard__works-todo-active'))
    e.target.parentNode.nextElementSibling.classList.toggle('dashboard__works-more-active')

  if (e.target.classList.contains('dashboard__works-more-button'))
    e.target.parentNode.parentNode.classList.toggle('dashboard__works-more-active')
})
.dashboard__works-more {
  opacity: 0;
  display: none;
}

.dashboard__works-more-active {
  display: flex;
  animation: 1s fade-in forwards;
}

@keyframes fade-in {
  to {
    opacity: 1;
  }
}
<div class="dashboard__works-todo">
  <a href="javascript: void 0;" class="dashboard__works-todo-active">Get 3 Quotes</a>
</div>

<div class="dashboard__works-more">
  <div class="dashboard__works-more-left">
    <div class="dashboard__works-more-text">Lorem Lorem Lorem</div>
  </div>
  <div class="dashboard__works-more-right">
    <a href="javascript: void 0;" class="dashboard__works-more-button">Close</a>
  </div>
</div>

<div class="dashboard__works-todo">
  <a href="javascript: void 0;" class="dashboard__works-todo-active">Get 3 Quotes</a>
</div>

<div class="dashboard__works-more">
  <div class="dashboard__works-more-left">
    <div class="dashboard__works-more-text">Lorem Lorem Lorem</div>
  </div>
  <div class="dashboard__works-more-right">
    <a href="javascript: void 0;" class="dashboard__works-more-button">Close</a>
  </div>
</div>

2
  • Мне нравится +1.
    – doox911
    28 дек 2019 в 18:30
  • Это решение не работает на Safari и мобильных устройствах
    – Daniil Lav
    29 дек 2019 в 12:29
1

$('.dashboard__works-more').fadeOut(0);

$('.dashboard__works-todo a').click(function() {
  const dataLinkId = $(this).data('link-id');
  if ($(this).hasClass('dashboard__works-more-active')) {
    $(this).removeClass('dashboard__works-more-active');
    $(`[data-show="${dataLinkId}"]`).fadeOut(300);
  } else {
    $(this).addClass('dashboard__works-more-active');
    $(`[data-show="${dataLinkId}"]`).fadeIn(300);
  }
});

$('.dashboard__works-more-button').click(function() {
  $(this).parent().parent().removeClass('dashboard__works-more-active').fadeOut(300);
});
.dashboard__works-more-active {
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dashboard__works-todo">
  <a href="javascript: void 0;" data-link-id="1">Get 3 Quotes</a>
</div>
<div class="dashboard__works-more" data-show="1">
  <div class="dashboard__works-more-left">
    <div class="dashboard__works-more-text">Lorem Lorem Lorem</div>
  </div>
  <div class="dashboard__works-more-right">
    <a href="javascript: void 0;" class="dashboard__works-more-button">
                    Close
                    </a>
  </div>
</div>

<div class="dashboard__works-todo">
  <a href="javascript: void 0;" data-link-id="2">Get 3 Quotes</a>
</div>
<div class="dashboard__works-more" data-show="2">
  <div class="dashboard__works-more-left">
    <div class="dashboard__works-more-text">Lorem Lorem Lorem</div>
  </div>
  <div class="dashboard__works-more-right">
    <a href="javascript: void 0;" class="dashboard__works-more-button">
                      Close
                    </a>
  </div>
</div>

Вариант 2 (изменил вёрстку):

$('.dashboard__works-more').fadeOut(0);

$('.dashboard__works-todo a').click(function() {
  if ($(this).hasClass('dashboard__works-more-active')) {
    $(this).removeClass('dashboard__works-more-active');
    $(this).parent().find('.dashboard__works-more').fadeOut(300);
  } else {
    $(this).addClass('dashboard__works-more-active');
    $(this).parent().find('.dashboard__works-more').fadeIn(300);
  }
});

$('.dashboard__works-more-button').click(function() {
  $(this).parent().parent().removeClass('dashboard__works-more-active').fadeOut(300);
});
.dashboard__works-more-active {
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dashboard__works-todo">
  <a href="javascript: void 0;">Get 3 Quotes</a>
  <div class="dashboard__works-more">
    <div class="dashboard__works-more-left">
      <div class="dashboard__works-more-text">Lorem Lorem Lorem</div>
    </div>
    <div class="dashboard__works-more-right">
      <a href="javascript: void 0;" class="dashboard__works-more-button">Close</a>
    </div>
  </div>
</div>

<div class="dashboard__works-todo">
  <a href="javascript: void 0;">Get 3 Quotes</a>
  <div class="dashboard__works-more">
    <div class="dashboard__works-more-left">
      <div class="dashboard__works-more-text">Lorem Lorem Lorem</div>
    </div>
    <div class="dashboard__works-more-right">
      <a href="javascript: void 0;" class="dashboard__works-more-button">Close</a>
    </div>
  </div>
</div>

1
  • Хорошее решение, но повторюсь, у меня будет много подобных элементов и data-link-id="1" не совсем то, что мне подходит
    – Daniil Lav
    28 дек 2019 в 18:12

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.