БЛОГ НА HUSL


Как реализовать переключение карточек на JQuery/JS?

Автор вопроса: fastlycode 
    На сайте не работает переключение карточек. Не знаю, как грамотно можно реализовать. Подскажите пожалуйста. Сам код:
    
    


$(".services__arrow__two").click(function(e) {
  e.preventDefault();
  $(".services__item").removeAttr("id");
  $(".services__item:nth-child(1)").next().attr("id", "active");
  $(".services__arrow").click(function(e) {
    e.preventDefault();
    $(".services__item").removeAttr("id");
    $(".services__item:first").attr("id", "active");
  });
  $(".services__arrow__two").click(function(e) {
    e.preventDefault();
    $(".services__item").removeAttr("id");
    $(".services__item:nth-child(2)").next().attr("id", "active");
    $(".services__arrow").click(function(e) {
      e.preventDefault();
      $(".services__item").removeAttr("id");
      $(".services__item:nth-child(1)").next().attr("id", "active");
      $(".services__arrow").click(function(e) {
        $(".services__item").removeAttr("id");
        $(".services__item:first").attr("id", "active");
        $(".services__arrow__two").click(function(e) {
          e.preventDefault();
          $(".services__item").removeAttr("id");
          $(".services__item:nth-child(1)").next().attr("id", "active");
          $(".services__item").removeAttr("id");
          $(".services__item:nth-child(2)").next().attr("id", "active");
        });
      });
    });
  });
});
.services {
  background-color: #f9f5f2;
  background-size: cover;
}

.services__box {
  min-height: 939px;
}

.services__description {
  font-family: "Raleway", sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #f6ae43;
  text-align: center;
  padding-top: 143px;
}

.services__title {
  font-family: "Raleway", sans-serif;
  font-size: 43px;
  font-weight: 600;
  color: #414141;
  text-align: center;
  margin-bottom: 62px;
}

.services__slider-inner {
  position: relative;
  display: flex;
  justify-content: space-between;
}

.services__slider {
  position: relative;
}

.services__arrow a {
  top: 2535px;
  left: 110px;
  position: absolute;
  color: #038fd6;
  font-weight: 600;
  background-color: #fff;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  padding: 18px 20px;
  font-size: 27px;
}

.services__arrow__two a {
  top: 2535px;
  right: 110px;
  position: absolute;
  color: #038fd6;
  font-weight: 600;
  background-color: #fff;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  padding: 18px 20px;
  font-size: 27px;
}

#services #active {
  background-color: #038fd6;
  color: #fff;
}

#active p {
  color: #fff;
}

#active h2 {
  color: #fff;
}

.services__arrow a:hover,
.services__arrow__two a:hover {
  background-color: #038fd6;
  color: #fff;
  transition: 0.2s ease;
  -webkit-transition: 0.2s ease;
  -moz-transition: 0.2s ease;
  -ms-transition: 0.2s ease;
  -o-transition: 0.2s ease;
}

.services__item {
  min-height: 549px;
  max-width: 350px;
  background-color: #ffffff;
}

.services__item+.serivces__item {
  margin-left: 32px;
}

.services__decoration-img {
  filter: invert(67%) sepia(65%) saturate(0%) hue-rotate(174deg) brightness(110%) contrast(92%);
  padding-bottom: 24px;
  -webkit-filter: invert(67%) sepia(65%) saturate(0%) hue-rotate(174deg) brightness(110%) contrast(92%);
}

.services__content {
  padding-left: 50px;
  padding-top: 36px;
}

.services__subtitle {
  font-family: "Raleway", sans-serif;
  font-size: 22px;
  color: #8d8c8c;
  font-weight: 700;
  padding-bottom: 39px;
}

.services__text {
  font-size: 16px;
  color: #8d8c8c;
  line-height: 24px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="css/style.css" />
  <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400;600;700&family=Nunito:wght@800&family=Raleway:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  <title>Document</title>
</head>

<body>
  <section class="services" id="services">
    <div class="container">
      <div class="services__inner">
        <div class="services__box">
          <p class="services__description">What we are offering</p>
          <h1 class="services__title">Our Services</h1>
          <div class="services__arrow">
            <a href="#">
              <</a>
          </div>
          <div class="services__slider">
            <div class="services__slider-inner">
              <a href="#" class="services__item" id="active">
                <img src="img/services-1.jpg" class="services__img" alt="">
                <div class="services__content"> <img src="img/services-decoration1.png" class="services__decoration-img" alt="">
                  <h2 class="services__subtitle">House Cleaning</h2>
                  <p class="services__text">A wonderful serenity has taken of my entire soul, like these sweet spring his which enjoy with my whole heart,like a these sweet spring. </p>
                </div>
              </a>
              <a href="#" class="services__item">
                <img src="img/services-2.jpg" class="services__img" alt="">
                <div class="services__content"><img width=74 height=95 class="services__decoration-img" src="img/services-decoration2.png" alt="" style="opacity:0.3;">
                  <h2 class="services__subtitle">Window Cleaning</h2>
                  <p class="services__text">A wonderful serenity has taken of my entire soul, like these sweet spring his which enjoy with my whole heart,like a these sweet spring. </p>
                </div>
              </a>
              <a href="#" class="services__item">
                <img src="img/services-3.jpg" class="services__img" alt="">
                <div class="services__content"><img src="img/services-decoration3.png" class="services__decoration-img" alt="">
                  <h2 class="services__subtitle">Garden Cleaning</h2>
                  <p class="services__text">A wonderful serenity has taken of my entire soul, like these sweet spring his which enjoy with my whole heart,like a these sweet spring. </p>
                </div>
              </a>
            </div>
          </div>
          <div class="services__arrow__two"><a href="#">></a></div>
        </div>
      </div>
    </div>
  </section>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</html>


Источник

Ответы (1 шт):

Автор решения: highpassion

Можно добавлять промежуточный класс, чтобы присваивать ему идентификатор активной вкладки, и ограничить выполнение кода условиями для первой и последней вкладок во избежание ошибок. Это подходит для задачи, но это далеко не лучший вариант.

Переписал добавление слушателей событий в виде функции, ибо если слайдеров много, то кода будет гораздо меньше

document.addEventListener("DOMContentLoaded", function(){


function activate(arrow, selector, myClass) {

$(arrow).click(function (e) {
  e.preventDefault();
    
    if( $(selector).attr('id') !== 'active') {
      $("#active")[myClass]().addClass(myClass);
      $("#active").removeAttr("id");
      $(`.${myClass}`).attr('id', 'active').removeClass(myClass);
    }
  
});

}


activate('.services__arrow__two', '.services__item:last-child', 'next');
activate('.services__arrow', '.services__item:first-child', 'prev');

});
.services {
  background-color: #f9f5f2;
  background-size: cover;
}

.services__box {
  min-height: 939px;
}

.services__description {
  font-family: "Raleway", sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #f6ae43;
  text-align: center;
  padding-top: 143px;
}

.services__title {
  font-family: "Raleway", sans-serif;
  font-size: 43px;
  font-weight: 600;
  color: #414141;
  text-align: center;
  margin-bottom: 62px;
}

.services__slider-inner {
  position: relative;
  display: flex;
  justify-content: space-between;
}

.services__slider {
  position: relative;
}

.services__arrow a {
  top: 935px;
  left: 110px;
  position: absolute;
  color: #038fd6;
  font-weight: 600;
  background-color: #fff;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  padding: 18px 20px;
  font-size: 27px;
}

.services__arrow__two a {
  top: 935px;
  right: 110px;
  position: absolute;
  color: #038fd6;
  font-weight: 600;
  background-color: #fff;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  padding: 18px 20px;
  font-size: 27px;
}

#services #active {
  background-color: #038fd6;
  color: #fff;
}

#active p {
  color: #fff;
}

#active h2 {
  color: #fff;
}

.services__arrow a:hover,
.services__arrow__two a:hover {
  background-color: #038fd6;
  color: #fff;
  transition: 0.2s ease;
  -webkit-transition: 0.2s ease;
  -moz-transition: 0.2s ease;
  -ms-transition: 0.2s ease;
  -o-transition: 0.2s ease;
}

.services__item {
  min-height: 549px;
  max-width: 350px;
  background-color: #ffffff;
}

.services__item+.serivces__item {
  margin-left: 32px;
}

.services__decoration-img {
  filter: invert(67%) sepia(65%) saturate(0%) hue-rotate(174deg) brightness(110%) contrast(92%);
  padding-bottom: 24px;
  -webkit-filter: invert(67%) sepia(65%) saturate(0%) hue-rotate(174deg) brightness(110%) contrast(92%);
}

.services__content {
  padding-left: 50px;
  padding-top: 36px;
}

.services__subtitle {
  font-family: "Raleway", sans-serif;
  font-size: 22px;
  color: #8d8c8c;
  font-weight: 700;
  padding-bottom: 39px;
}

.services__text {
  font-size: 16px;
  color: #8d8c8c;
  line-height: 24px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="css/style.css" />
  <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400;600;700&family=Nunito:wght@800&family=Raleway:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  <title>Document</title>
</head>

<body>
  <section class="services" id="services">
    <div class="container">
      <div class="services__inner">
        <div class="services__box">
          <p class="services__description">What we are offering</p>
          <h1 class="services__title">Our Services</h1>
          <div class="services__arrow">
            <a href="#">
              <</a>
          </div>
          <div class="services__slider">
            <div class="services__slider-inner">
              <a href="#" class="services__item" id="active">
                <img src="img/services-1.jpg" class="services__img" alt="">
                <div class="services__content"> <img src="img/services-decoration1.png" class="services__decoration-img" alt="">
                  <h2 class="services__subtitle">House Cleaning</h2>
                  <p class="services__text">A wonderful serenity has taken of my entire soul, like these sweet spring his which enjoy with my whole heart,like a these sweet spring. </p>
                </div>
              </a>
              <a href="#" class="services__item">
                <img src="img/services-2.jpg" class="services__img" alt="">
                <div class="services__content"><img width=74 height=95 class="services__decoration-img" src="img/services-decoration2.png" alt="" style="opacity:0.3;">
                  <h2 class="services__subtitle">Window Cleaning</h2>
                  <p class="services__text">A wonderful serenity has taken of my entire soul, like these sweet spring his which enjoy with my whole heart,like a these sweet spring. </p>
                </div>
              </a>
              <a href="#" class="services__item">
                <img src="img/services-3.jpg" class="services__img" alt="">
                <div class="services__content"><img src="img/services-decoration3.png" class="services__decoration-img" alt="">
                  <h2 class="services__subtitle">Garden Cleaning</h2>
                  <p class="services__text">A wonderful serenity has taken of my entire soul, like these sweet spring his which enjoy with my whole heart,like a these sweet spring. </p>
                </div>
              </a>
            </div>
          </div>
          <div class="services__arrow__two"><a href="#">></a></div>
        </div>
      </div>
    </div>
  </section>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</html>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.