Jquery在设备上向元素添加类

Question

我正在建立一个响应式滑块，它有两种不同的行为。

一个用于桌面。 一个用于移动。

步骤是：

• 检查设备模式是否处于活动状态并添加课程移动
• 检查桌面模式是否处于活动状态并添加课程桌面

我有代码的问题是：

• 如何在点击时向<li>添加有效的课程？

• 如果点击<li>，如何将活动课程移至close-btn？

  Demo Here

＆＃13;

＆＃13;

//Check if device mode is active and add class Mobile 
mobileViewUpdate();
$(window).on('load, resize', mobileViewUpdate);

function mobileViewUpdate() {
  var viewportWidth = $(window).width();
  if (viewportWidth < 600) {
    $(".items").addClass("mobile");
    $(".mobile").removeClass("desktop");
  } else {

    $(".items").addClass("desktop");
    $(".mobile").removeClass("mobile");
    $(".mobile").removeClass("active");
  }
};
// Now add class active to li if parent has class Mobile 
$(".mobile li").click(function(e) {
  e.preventDefault;
  // remove classes from all

  if (!$(this).hasClass("active")) {
    $(this).addClass("active");
  }
});

$(".close-btn").click(function(e) {
  e.preventDefault;
  $(this).find('li.active').removeClass('active')
});

＆＃13;

.items {
  position: fixed;
  top: 50%;
  left: 50%;
  text-align: center;
  width: 5000px;
  -webkit-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);
}

.items li {
  position: relative;
  vertical-align: middle;
  display: inline-block;
  list-style: none;
  width: 320px;
  height: 320px;
  /*background-color: rgba(228, 0, 59, 1);*/
  -webkit-transition-duration: .5s;
  transition-duration: .5s;
  overflow: hidden;
  cursor: pointer;
}

.items li .bg-img {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center top;
}

.items li>a {
  color: white;
  text-decoration: none;
  cursor: pointer;
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  z-index: 2;
}

.items li>a .content {
  /*  background: -webkit-linear-gradient(transparent, rgba(228, 0, 59, 0.75));
  background: linear-gradient(transparent, rgba(228, 0, 59, 0.75));*/
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateY(100%) translateX(-50%);
  transform: translateY(100%) translateX(-50%);
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  opacity: 0;
  padding: 10px 10px 10px 10px;
}

.items li>a .content h2 {
  font-weight: 300;
  color: white;
  font-size: 30px;
  margin: 0;
  padding: 0;
  text-align: center;
}


/*make bg on MOBILE personalized*/

.mobile {
  border: 1px solid red;
}

.mobile li.active a .content {
  -webkit-transform: translateY(0) translateX(-50%);
  transform: translateY(0) translateX(-50%);
  opacity: 1;
}

.mobile li .content>span.close-btn {
  position: absolute;
  top: 10px;
  right: -10px;
  -webkit-mask: url(https://raw.githubusercontent.com/encharm/Font-Awesome-SVG-PNG/master/black/svg/close.svg) no-repeat;
  mask: url(https://raw.githubusercontent.com/encharm/Font-Awesome-SVG-PNG/master/black/svg/close.svg) no-repeat;
  -webkit-mask-size: 20px;
  mask-size: 20px;
  background-color: #fff;
  cursor: pointer;
  display: block;
  text-indent: -9999em;
  z-index: 3;
}


/*make bg on DESKTOP personalized*/

.desktop {
  border: 1px solid blue;
}

.desktop li .content>span.close-btn {
  display: none;
}

.desktop li:hover {
  -webkit-transition-delay: .5s;
  transition-delay: .5s;
  width: calc(320px + 40px);
  height: calc(320px + 40px);
}

.desktop li:hover a .content {
  -webkit-transform: translateY(0) translateX(-50%);
  transform: translateY(0) translateX(-50%);
  -webkit-transition-delay: .75s;
  transition-delay: .75s;
  opacity: 1;
}

＆＃13;

<div class="clearfix flex-auto py3">
  <ul class="items">
    <li>
      <div class="bg-img" style="background-image: url('http://placehold.it/320x320');"></div>
      <a href="#">
        <div class="content">
          <span class="close-btn">close btn</span>
          <h2>Slider item</h2>
        </div>
      </a>
    </li>

    <li>
      <div class="bg-img" style="background-image: url('http://placehold.it/320x320');"></div>
      <a href="#">
        <div class="content">
          <span class="close-btn">close btn</span>
          <h2>Slider item</h2>
        </div>
      </a>
    </li>

    <li>
      <div class="bg-img" style="background-image: url('http://placehold.it/320x320');"></div>
      <a href="#">
        <div class="content">
          <span class="close-btn">close btn</span>
          <h2>Slider item</h2>
        </div>
      </a>
    </li>

    <li>
      <div class="bg-img" style="background-image: url('http://placehold.it/320x320');"></div>
      <a href="#">
        <div class="content">
          <span class="close-btn">close btn</span>
          <h2>Slider item</h2>
        </div>
      </a>
    </li>

    <li>
      <div class="bg-img" style="background-image: url('http://placehold.it/320x320');"></div>
      <a href="#">
        <div class="content">
          <span class="close-btn">close btn</span>
          <h2>Slider item</h2>
        </div>
      </a>
    </li>

    <li>
      <div class="bg-img" style="background-image: url('http://placehold.it/320x320');"></div>
      <a href="#">
        <div class="content">
          <span class="close-btn">close btn</span>
          <h2>Slider item</h2>
        </div>
      </a>
    </li>

    <li>
      <div class="bg-img" style="background-image: url('http://placehold.it/320x320');"></div>
      <a href="#">
        <div class="content">
          <span class="close-btn">close btn</span>
          <h2>Slider item</h2>
        </div>
      </a>
    </li>

    <li>
      <div class="bg-img" style="background-image: url('http://placehold.it/320x320');"></div>
      <a href="#">
        <div class="content">
          <span class="close-btn">close btn</span>
          <h2>Slider item</h2>
        </div>
      </a>
    </li>

    <li>
      <div class="bg-img" style="background-image: url('http://placehold.it/320x320');"></div>
      <a href="#">
        <div class="content">
          <span class="close-btn">close btn</span>
          <h2>Slider item</h2>
        </div>
      </a>
    </li>

    <li>
      <div class="bg-img" style="background-image: url('http://placehold.it/320x320');"></div>
      <a href="#">
        <div class="content">
          <span class="close-btn">close btn</span>
          <h2>Slider item</h2>
        </div>
      </a>
    </li>

    <li>
      <div class="bg-img" style="background-image: url('http://placehold.it/320x320');"></div>
      <a href="#">
        <div class="content">
          <span class="close-btn">close btn</span>
          <h2>Slider item</h2>
        </div>
      </a>
    </li>

    <li>
      <div class="bg-img" style="background-image: url('http://placehold.it/320x320');"></div>
      <a href="#">
        <div class="content">
          <span class="close-btn">close btn</span>
          <h2>Slider item</h2>
        </div>
      </a>
    </li>
  </ul>

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

它不起作用，因为

1.（这是可选的）我认为你的点击功能应该包含在mobileViewUpdate功能中

2. close-btn是.mobile li的孩子（在里面）所以当你点击它时，你也点击了li所以你同时删除并添加了课程< / p>

如果您单击的元素是close btn，则应检查（单击mobile li时），如果是，则取消单击。因此，当您单击close-btn时，代码将不会解释您单击li也

3.在close-btn点击功能中编写$(this).find('li.active').removeClass('active')。 find（）仅搜索INSIDE元素。在这种情况下，li是close-btn的父级，但不是直接的父级，因此您需要使用parents()来查找li.active

请参阅下面的代码或jsfiddle jsFiddle

//Check if device mode is active and add class Mobile 
mobileViewUpdate();
$(window).on('load, resize', mobileViewUpdate);

function mobileViewUpdate() {
  var viewportWidth = $(window).width();
  if (viewportWidth < 600) {
    $(".items").addClass("mobile");
    $(".mobile").removeClass("desktop");
  } else {

    $(".items").addClass("desktop");
    $(".mobile").removeClass("mobile");
    $(".mobile").removeClass("active");
  }
};
// Now add class active to li if parent has class Mobile 
$(".mobile li").click(function(e) {
  e.preventDefault;
  // remove classes from all
  if ($(e.target).is('.close-btn')) {

    return;
  }

  if (!$(this).hasClass("active")) {

    $(this).addClass("active");
  }
  $("li.active").not(this).removeClass("active")
});

$(".close-btn").click(function(e) {

  $(this).parents('li').removeClass("active")
});

.items {
  position: fixed;
  top: 50%;
  left: 50%;
  text-align: center;
  width: 5000px;
  -webkit-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);
}

.items li {
  position: relative;
  vertical-align: middle;
  display: inline-block;
  list-style: none;
  width: 320px;
  height: 320px;
  /*background-color: rgba(228, 0, 59, 1);*/
  -webkit-transition-duration: .5s;
  transition-duration: .5s;
  overflow: hidden;
  cursor: pointer;
}

.items li .bg-img {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center top;
}

.items li >a {
  color: white;
  text-decoration: none;
  cursor: pointer;
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  z-index: 2;
}

.items li > a .content {
  /*  background: -webkit-linear-gradient(transparent, rgba(228, 0, 59, 0.75));
  background: linear-gradient(transparent, rgba(228, 0, 59, 0.75));*/
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateY(100%) translateX(-50%);
  transform: translateY(100%) translateX(-50%);
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  opacity: 0;
  padding: 10px 10px 10px 10px;
}

.items li >a .content h2 {
  font-weight: 300;
  color: white;
  font-size: 30px;
  margin: 0;
  padding: 0;
  text-align: center;
}


/*make bg on MOBILE personalized*/

.mobile {
  border: 1px solid red;
}

.mobile li.active a .content {
  -webkit-transform: translateY(0) translateX(-50%);
  transform: translateY(0) translateX(-50%);
  opacity: 1;
}

.mobile li .content >span.close-btn {
  position: absolute;
  top: 10px;
  right: -10px;
  -webkit-mask-size: 20px;
  mask-size: 20px;
  background-color: #fff;
  cursor: pointer;
  display: block;
  text-indent: -9999em;
  z-index: 9999;
  height: 40px;
  width: 40px;
  background: Red;
}


/*make bg on DESKTOP personalized*/

.desktop {
  border: 1px solid blue;
}

.desktop li .content >span.close-btn {
  display: none;
}

.desktop li:hover {
  -webkit-transition-delay: .5s;
  transition-delay: .5s;
  width: calc(320px + 40px);
  height: calc(320px + 40px);
}

.desktop li:hover a .content {
  -webkit-transform: translateY(0) translateX(-50%);
  transform: translateY(0) translateX(-50%);
  -webkit-transition-delay: .75s;
  transition-delay: .75s;
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="clearfix flex-auto py3">
  <ul class="items">
    <li>
      <div class="bg-img" style="background-image: url('http://placehold.it/320x320');"></div>
      <a href="#">
        <div class="content">
          <span class="close-btn">close btn</span>
          <h2>Slider item</h2>
        </div>
      </a>
    </li>

    <li>
      <div class="bg-img" style="background-image: url('http://placehold.it/320x320');"></div>
      <a href="#">
        <div class="content">
          <span class="close-btn">close btn</span>
          <h2>Slider item</h2>
        </div>
      </a>
    </li>

    <li>
      <div class="bg-img" style="background-image: url('http://placehold.it/320x320');"></div>
      <a href="#">
        <div class="content">
          <span class="close-btn">close btn</span>
          <h2>Slider item</h2>
        </div>
      </a>
    </li>

    <li>
      <div class="bg-img" style="background-image: url('http://placehold.it/320x320');"></div>
      <a href="#">
        <div class="content">
          <span class="close-btn">close btn</span>
          <h2>Slider item</h2>
        </div>
      </a>
    </li>

    <li>
      <div class="bg-img" style="background-image: url('http://placehold.it/320x320');"></div>
      <a href="#">
        <div class="content">
          <span class="close-btn">close btn</span>
          <h2>Slider item</h2>
        </div>
      </a>
    </li>

    <li>
      <div class="bg-img" style="background-image: url('http://placehold.it/320x320');"></div>
      <a href="#">
        <div class="content">
          <span class="close-btn">close btn</span>
          <h2>Slider item</h2>
        </div>
      </a>
    </li>

    <li>
      <div class="bg-img" style="background-image: url('http://placehold.it/320x320');"></div>
      <a href="#">
        <div class="content">
          <span class="close-btn">close btn</span>
          <h2>Slider item</h2>
        </div>
      </a>
    </li>

    <li>
      <div class="bg-img" style="background-image: url('http://placehold.it/320x320');"></div>
      <a href="#">
        <div class="content">
          <span class="close-btn">close btn</span>
          <h2>Slider item</h2>
        </div>
      </a>
    </li>

    <li>
      <div class="bg-img" style="background-image: url('http://placehold.it/320x320');"></div>
      <a href="#">
        <div class="content">
          <span class="close-btn">close btn</span>
          <h2>Slider item</h2>
        </div>
      </a>
    </li>

    <li>
      <div class="bg-img" style="background-image: url('http://placehold.it/320x320');"></div>
      <a href="#">
        <div class="content">
          <span class="close-btn">close btn</span>
          <h2>Slider item</h2>
        </div>
      </a>
    </li>

    <li>
      <div class="bg-img" style="background-image: url('http://placehold.it/320x320');"></div>
      <a href="#">
        <div class="content">
          <span class="close-btn">close btn</span>
          <h2>Slider item</h2>
        </div>
      </a>
    </li>

    <li>
      <div class="bg-img" style="background-image: url('http://placehold.it/320x320');"></div>
      <a href="#">
        <div class="content">
          <span class="close-btn">close btn</span>
          <h2>Slider item</h2>
        </div>
      </a>
    </li>
  </ul>

</div>