Target this и class не работают должным образом

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

Я безуспешно пробовал:

$(this).find('element')

А также :

('', this)

//slick slider
$('.responsive').slick({
  dots: true,
  prevArrow: $('.prev'),
  nextArrow: $('.next'),
  infinite: false,
  speed: 300,
  slidesToShow: 4,
  slidesToScroll: 4,
  responsive: [{
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
    // You can unslick at a given breakpoint now by adding:
    // settings: "unslick"
    // instead of a settings object
  ]
});


//tilt
$('.tilt-card').tilt({
  perspective: 1000,

})

//show details
$(".faction-more-btn").hover(
  function() {

    $('.description-overlay').addClass('desc-hover');
  },
  function() {
    $(".description-overlay").removeClass('desc-hover');
  }
);

$(document).ready(function() {
  $('button').hover(function() {
    $(this).text('Read More');
  }, function() {
    $(this).text('Learn More');
  });
});

//scroll text
$(document).ready(function() {
  var count;
  var interval;

  $(".faction-more-btn").on('mouseover', function() {
    var div = $('.description-container');

    interval = setInterval(function() {
      count = count || 1;
      var pos = div.scrollTop();
      div.scrollTop(pos + count);
    }, 100);
  }).click(function() {
    if (count < 6) {
      count = count + 1;
    }
  }).on('mouseout', function() {
    // reset the speed on out
    count = 0;
    clearInterval(interval);
    $(".description-container").scrollTop(0);
  });
});
* {
  font-family: 'Exo', sans-serif;
}

body {
  background: url("https://mankindreborn.com/wp-content/uploads/2018/04/newBG.jpg");
  background-size: cover;
}

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

.container {
  padding-top: 100px;
}

img {
  width: 100%;
  height: 400px;
  padding: 5px;
}

h2 {
  text-align: center;
  padding-bottom: 1em;
}

.slick-dots {
  text-align: center;
  margin: 0 0 10px 0;
  padding: 0;
  li {
    display: inline-block;
    margin-left: 4px;
    margin-right: 4px;
    &.slick-active {
      button {
        background-color: black;
      }
    }
    button {
      font: 0/0 a;
      text-shadow: none;
      color: transparent;
      background-color: #999;
      border: none;
      width: 15px;
      height: 15px;
      border-radius: 50%;
    }
     :hover {
      background-color: black;
    }
  }
}


/* Custom Arrow */

.prev {
  color: #999;
  position: absolute;
  top: 38%;
  left: -2em;
  font-size: 1.5em;
   :hover {
    cursor: pointer;
    color: black;
  }
}

.next {
  color: #999;
  position: absolute;
  top: 38%;
  right: -2em;
  font-size: 1.5em;
   :hover {
    cursor: pointer;
    color: black;
  }
}

@media screen and (max-width: 800px) {
  .next {
    display: none !important;
  }
}


/* the slides */

.slick-slide {
  margin: 0 10px;
}


/* the parent */

.slick-list {
  margin: 0 -10px;
}

.slide {
  position: relative;
}

.tilt-card {
  overflow: visible;
  transform-style: preserve-3d;
}

.faction-char-img {
  width: 85%;
  height: auto;
  transform: translateZ(30px);
  overflow: visible;
}

.faction-char-con {
  position: absolute;
  bottom: 0px;
}

.faction-logo-con {
  position: absolute;
  top: 10px;
}

.faction-logo {
  width: 70%;
  height: auto;
  transform: translateZ(20px);
  overflow: visible;
  float: right;
  margin-right: 10px;
}

.nsm-overlay {
  position: absolute;
  width: 96%;
  margin-left: 6px;
  top: 4px;
  height: 200px;
  background: url('https://i.imgur.com/xBr7FM1.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: right;
  transform: translateZ(30px);
}

.foe-overlay {
  position: absolute;
  width: 98%;
  margin-left: 3px;
  top: 4px;
  height: 200px;
  background: url('https://i.imgur.com/tyF6AgV.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: right;
  transform: translateZ(30px);
}

.faction-more-btn {
  position: absolute;
  bottom: 20px;
  margin-left: 53%;
  z-index: 100;
  transform: translateZ(50px);
  background-color: #212121cc;
  border: none;
  color: #585858;
  padding: 10px 20px 10px;
}

.faction-more-btn:hover {
  background-color: #68ddda;
  color: #000;
}

.description-overlay {
  position: absolute;
  width: 97%;
  margin-left: 4px;
  bottom: 0px;
  height: 0%;
  background-color: #0e0e0ef5;
  z-index: 99;
  transform: translateZ(37px);
  transition: height 0.5s;
  -webkit-transition: height 0.5s;
  color: #fff;
  padding-left: 25px;
  padding-left: 25px;
}

.description-container {
  margin-top: 20px;
  overflow-y: scroll;
  height: 185px;
  padding-right: 20px;
  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
}

.description-container::-webkit-scrollbar {
  display: none;
}

.desc-hover {
  position: absolute;
  width: 97%;
  margin-left: 4px;
  bottom: 0px;
  height: 100%;
  background-color: #0e0e0ea6;
  z-index: 99;
  transform: translateZ(37px);
  transition: height 0.5s;
  -webkit-transition: height 0.5s;
}

.description-overlay h2 {
  text-align: left;
  font-size: 20px;
  margin-top: 30px;
  padding-right: 10px;
}

.faction-type {
  color: #68ddda;
  margin-top: -25px;
}

.faction-details {
  font-size: 10px;
}

.foe-tower {
  position: absolute;
  top: 0px;
  height: 100%;
  width: auto;
  transform: translateZ(20px);
}

.foe-logo {
  margin-right: -8px;
  margin-top: -9px;
}

.nsm-img {
  width: 70%;
}

.nsm-logo {
  margin-top: -10px;
  width: 65%
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/gijsroge/tilt.js/38991dd7/dest/tilt.jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.5/slick.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.5/slick.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">

  <div class="row">
    <div class="col-md-12 heroSlider-fixed">
      <div class="overlay">
      </div>
      <!-- Slider -->
      <div class="slider responsive">
        <div class="tilt-card slide">
          <img src="https://i.imgur.com/eHkER1D.jpg">
          <div class="nsm-overlay"></div>
          <div class="description-overlay">
            <h2>NORTH STAR MINING</h2>
            <p class="faction-type">MEGACORP</p>
            <p class="faction-details"><b>BASED:</b> Upper Copper City, Venus, Sol.</p>
            <p class="faction-details"><b>FOUNDED:</b> -</p>
            <div class="description-container">
              <br><br>
              <p>One of the oldest corporations still in existence and one of the Big Three Megacorps, North Star Mining has its origins on pre-space Earth. In 2045, a former mine supervisor for SA Mines named Dawie Copper took advantage of the privatisation
                of his former employers and purchased several palladium mines in South Africa. By the start of the Second Space Race in 2075, the Copper Mining Group (CMG), owned almost all of the mines in South Africa and Copper’s son Anton had taken
                the reins of the company...</p>
            </div>
            <p class="learn-more-text"></p>
          </div>
          <div class="faction-logo-con">
            <img class="faction-logo nsm-logo" src="https://i.imgur.com/9GiEkjB.png">
          </div>
          <button class="faction-more-btn">Learn More</button>
          <div class="faction-char-con">
            <img class="faction-char-img nsm-img" src="https://i.imgur.com/nOpzEfF.png">
          </div>

        </div>
        <div class="tilt-card slide">
          <img src="https://i.imgur.com/urJ0pyz.png">
          <img class="foe-tower" src="https://i.imgur.com/jm9Gjvw.png">
          <div class="foe-overlay"></div>
          <div class="description-overlay">
            <h2>FOLLOWERS OF ETERNITY</h2>
            <p class="faction-type">ANARCHO-TERRORISTS</p>
            <p class="faction-details"><b>BASED:</b> Unknown, speculated near New Terra</p>
            <p class="faction-details"><b>FOUNDED:</b> -</p>
            <div class="description-container">
              <br><br>
              <p>The slums of Earth’s Mega-Cities proved to be the perfect breeding ground for fanaticism and dissent. The Followers of Eternity have no grounded history; their origin is fragmented amongst the various slums from where they came. The faction
                started life as a quasi-charity group sometime in the early 22nd century seeking to improve the lives of those who lived in the squalled urban centers; they soon realized that real change would only come through anarchy. The 'charity'
                organized into street gangs and set up 'education hubs' from which their movement gained a mass following amongst the young, oppressed low entry union workers and the many forgotten who dwell at street level. The group's aim is simple,
                resist the Union and their corrupt corporate masters - modeling themselves as 'enlightened anarchists' out to smash the system...</p>
            </div>
            <p class="learn-more-text"></p>
          </div>
          <div class="faction-logo-con">
            <img class="faction-logo foe-logo" src="https://i.imgur.com/y3gH30H.png">
          </div>
          <button class="faction-more-btn">Learn More</button>
          <div class="faction-char-con">
            <img class="faction-char-img" src="https://i.imgur.com/x45t5zh.png">
          </div>



        </div>
        <div class="tilt-card">
          <img src="http://placehold.it/200x150" alt="" />
        </div>
        <div class="tilt-card">
          <img src="http://placehold.it/200x150" alt="" />
        </div>
        <div class="tilt-card">
          <img src="http://placehold.it/200x150" alt="" />
        </div>
        <div class="tilt-card">
          <img src="http://placehold.it/200x150" alt="" />
        </div>
        <div class="tilt-card">
          <img src="http://placehold.it/200x150" alt="" />
        </div>
        <div class="tilt-card">
          <img src="http://placehold.it/200x150" alt="" />
        </div>
      </div>
      <!-- control arrows -->
      <div class="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      </div>
      <div class="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      </div>

    </div>
  </div>
</div>

Живая версия на codepen

Спасибо за внимание @Taplar

MrTDandy 13.09.2018 21:20

@MrTDandy Np. Спасибо за отметку. Это сообщило мне, что сообщение было исправлено, чтобы я мог отменить свой голос против :)

Taplar 13.09.2018 21:25
0
2
89
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Это то, что вы ищите:

$(this).closest('.tilt-card').find('.description-overlay').addClass('desc-hover');

вместо того

$('.description-overlay').addClass('desc-hover');

https://codepen.io/anon/pen/zJaPbQ

Ваша проблема в том, что вы добавляете класс ко всем элементам с помощью класса css 'description-overlay', вам нужно добавить только тот, который находится внутри текущей карты наклона

Рабочий код.

Это происходит из-за части наведения ниже, вы используете селектор классов $('.description-overlay'), который выберет все элементы с этим классом и добавит / удалит класс desc-hover.

$(".faction-more-btn").hover(
  function() {
    $('.description-overlay').addClass('desc-hover');
  },
  function() {
    $(".description-overlay").removeClass('desc-hover');
  }
);

Следует использовать $(this) для таргетинга на соответствующий блок .description-overlay каждой кнопки:

//show details
$(".faction-more-btn").hover(
  function() {
    $(this).siblings(".description-overlay").addClass('desc-hover');
  },
  function() {
    $(this).siblings(".description-overlay").removeClass('desc-hover');
  }
);

ЗАМЕТКА : Обе функции, которые вы пробовали, не работают, поскольку они смотрят внутрь текущей кнопки при наведении курсора, когда div является братом button, поэтому вы можете использовать функцию siblings() или комбинацию метода parent()/closest() и find(), например:

$(this).parent().find(".description-overlay");
$(this).closest('.tilt-card').find(".description-overlay");
$(this).siblings(".description-overlay")

Спасибо за вдумчивый ответ!

MrTDandy 13.09.2018 21:22

Другие вопросы по теме