要素をクリックするとjQueryで別の要素のクラスを削除します

Question

私のコードに問題があります。

現在、.activeクラスは、電子ブックイメージ1、電子ブックイメージ2、電子ブックイメージ3を意図したdivをクリックすると適用されます。

私がしたいのは、現在実行していないdiv自体をクリックしたときに.activeクラスを削除することです。ここで

https://fiddle.jshell.net/aerandur/v20hmy3b/

$(document).ready(function() { 
 
    $('.one').on('click', function() { 
 
    $('.one').removeClass('active'); 
 
    $id = "#" + $(this).addClass('active').attr('data-id'); 
 
    $('.two:not(' + $id + ')').hide(); 
 
    $($id).slideToggle(); 
 
    }); 
 
});

/* .container { 
 
    margin: 0 auto; 
 
} 
 

 
.frame { 
 
    max-width: 940px; 
 
    margin: 0 auto; 
 
} 
 
*/ 
 
.one { 
 
    top: 0; 
 
    background-color: lightblue; 
 
    z-index: 1; 
 
    padding: 25px 10px; 
 
    width: 30%; 
 
    min-width: 200px; 
 
    display: inline-block; 
 
    cursor: pointer; 
 
} 
 

 
.two { 
 
    background-color: yellow; 
 
    z-index: -1; 
 
    display: none; 
 
} 
 

 
.active { 
 
    background: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="whatever-you-wanna-name top-product-list-ebbok"> 
 
    <div class="frame"> 
 
    <div class="c-3 one" data-id="p1">ebook image 1</div> 
 
    <div class="c-3 one" data-id="p2">ebook image 2</div> 
 
    <div class="c-3 one" data-id="p3">ebook image 3</div> 
 
    </div> 
 
</div> 
 
<div class="whatever-you-wanna-name top-product-list-description"> 
 
    <div class="frame"> 
 
    <div class="two" id="p1">ebook for content image 1</div> 
 
    <div class="two" id="p2">ebook for content image 2</div> 
 
    <div class="two" id="p3">ebook for content image 3</div> 
 
    </div> 
 
</div>

Answer 1

最短オプションを、私の知る限り。 .not(this)を使用してセレクタを調整し、要素自体のクラスを切り替えます。

$(document).ready(function() { 
    $('.one').on('click', function() { 
    $('.one').not(this).removeClass('active'); 
    $id = "#" + $(this).toggleClass('active').attr('data-id'); 
    $('.two:not(' + $id + ')').hide(); 
    $($id).slideToggle(); 
    }); 
}); 

https://fiddle.jshell.net/v20hmy3b/10/

Answer 2

誰かが解決策を簡素化することができるかもしれないが、それは動作しない、実用的なソリューションです。

$(document).ready(function() { 
 
    $('.one').on('click', function() { 
 
    
 
    if(!$(this).hasClass("active")){ 
 
     $('.one').removeClass('active'); 
 
     $(this).addClass('active');  
 
    } 
 
    else{ 
 
     $('.one').removeClass('active'); 
 
     } 
 
    
 
    $id = "#" + $(this).attr('data-id'); 
 
    $('.two:not(' + $id + ')').hide(); 
 
    $($id).slideToggle(); 
 
    }); 
 
});

/* .container { 
 
    margin: 0 auto; 
 
} 
 

 
.frame { 
 
    max-width: 940px; 
 
    margin: 0 auto; 
 
} 
 
*/ 
 
.one { 
 
    top: 0; 
 
    background-color: lightblue; 
 
    z-index: 1; 
 
    padding: 25px 10px; 
 
    width: 30%; 
 
    min-width: 200px; 
 
    display: inline-block; 
 
    cursor: pointer; 
 
} 
 

 
.two { 
 
    background-color: yellow; 
 
    z-index: -1; 
 
    display: none; 
 
} 
 

 
.active { 
 
    background: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="whatever-you-wanna-name top-product-list-ebbok"> 
 
    <div class="frame"> 
 
    <div class="c-3 one" data-id="p1">ebook image 1</div> 
 
    <div class="c-3 one" data-id="p2">ebook image 2</div> 
 
    <div class="c-3 one" data-id="p3">ebook image 3</div> 
 
    </div> 
 
</div> 
 
<div class="whatever-you-wanna-name top-product-list-description"> 
 
    <div class="frame"> 
 
    <div class="two" id="p1">ebook for content image 1</div> 
 
    <div class="two" id="p2">ebook for content image 2</div> 
 
    <div class="two" id="p3">ebook for content image 3</div> 
 
    </div> 
 
</div>

Answer 3

それはそのようなものですか？ https://fiddle.jshell.net/zzwctuq9/1/

$(document).ready(function() { 
 
    $('.one').on('click', function() 
 
    { 
 
    \t 
 
    if ( $(this).hasClass('active')) 
 
    { 
 
    \t $(this).removeClass('active'); 
 
    } 
 
    else 
 
    { 
 
    \t $(this).addClass('active'); 
 
    } 
 

 
    $id = "#" + $(this).attr('data-id'); 
 
    $($id).slideToggle(); 
 
    }); 
 
});

/* .container { 
 
    margin: 0 auto; 
 
} 
 

 
.frame { 
 
    max-width: 940px; 
 
    margin: 0 auto; 
 
} 
 
*/ 
 
.one { 
 
    top: 0; 
 
    background-color: lightblue; 
 
    z-index: 1; 
 
    padding: 25px 10px; 
 
    width: 30%; 
 
    min-width: 200px; 
 
    display: inline-block; 
 
    cursor: pointer; 
 
} 
 

 
.two { 
 
    background-color: yellow; 
 
    z-index: -1; 
 
    display: none; 
 
} 
 

 
.active { 
 
    background: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="whatever-you-wanna-name top-product-list-ebbok"> 
 
    <div class="frame"> 
 
    <div class="c-3 one" data-id="p1">ebook image 1</div> 
 
    <div class="c-3 one" data-id="p2">ebook image 2</div> 
 
    <div class="c-3 one" data-id="p3">ebook image 3</div> 
 
    </div> 
 
</div> 
 
<div class="whatever-you-wanna-name top-product-list-description"> 
 
    <div class="frame"> 
 
    <div class="two" id="p1">ebook for content image 1</div> 
 
    <div class="two" id="p2">ebook for content image 2</div> 
 
    <div class="two" id="p3">ebook for content image 3</div> 
 
    </div> 
 
</div>

Answer 4

はこれを試してみてください：

$(document).ready(function() { 
    $('.one').on('click', function() { 
    if(!$(this).hasClass('active')){ 
     $('.one').removeClass('active'); 
    }  
    $id = "#" + $(this).toggleClass('active').attr('data-id'); 
    $('.two:not(' + $id + ')').hide(); 
    $($id).slideToggle(); 
    }); 
});