デバイス上の要素にクラスを追加するJquery

Question

私は2つの異なる振る舞いを持つレスポンシブスライダーを構築しています。

デスクトップ用。 モバイル用。

ステップは次のとおりです。デバイスモードが有効な場合

• チェックとクラスを追加モバイル
• チェックデスクトップモードがアクティブである場合や、クラスを追加するデスクトップ

問題Iコードを賢明に持っている：

• クリックで<li>にアクティブなクラスを追加するにはどうすればよいですか？

• close-btnをクリックすると、<li>にアクティブなクラスを削除するにはどうすればよいですか？

  Demo Here

//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あなたはそれをクリックしたときに、あなたはまた、あなたがいる場合（携帯リーをクリックしたとき）を確認する必要がありますので、同じ時間に

を削除し、クラスを追加liをクリックして.mobile liの子（内部である）でありますあなたがクリックした要素は閉じるbtnであり、そうであればクリックをキャンセルします。したがって、close-btnをクリックすると、コードをクリックしたと解釈されません。

3.in close-btnをクリックしてください。$(this).find('li.active').removeClass('active')をクリックします。 find（）は要素の中だけを検索します。この場合には、Liがclose-btnの親ではなく、即時の一つであり、あなたがli.active

を見る見つけることparents()を使用する必要があります以下のコードまたは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>