jQuery將類添加到設備上的元素

Question

我正在構建一個響應式滑塊，它將具有兩種不同的行為。

一種用於台式機。 一個用於移動。

該步驟是：

• 檢查設備模式是否處於活動狀態並添加Mobile類
• 檢查桌面模式是否處於活動狀態並添加類Desktop

我在代碼方面的問題是：

• 如何在單擊時將活動的班級添加到<li> ？

• 如果單擊close-btn如何刪除對<li>有效的類？

  在這里演示

 //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') }); 

 .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; } 

 <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> 

Answer 1

它不起作用，因為

1.（這是可選的）我認為您的點擊功能應包含在mobileViewUpdate功能中

2. close-btn是.mobile li一個子代（位於內部），因此，當您單擊它時，您也單擊li以便同時刪除和添加類

您應該檢查（單擊移動li時）您單擊的元素是否為close btn，如果是，則取消單擊。 因此，當您單擊close-btn ，代碼不會解釋您也單擊了li。

3.在close-btn click函數中，編寫$(this).find('li.active').removeClass('active') 。 find（）僅在element內部搜索。 在這種情況下，li是close-btn的父close-btn ，但不是直接的父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>