Entfernen Sie die Klasse eines anderen Elements mit jQuery, wenn Sie auf Element klicken

Question

Ich habe ein Problem mit meinem Code.

Gegenwärtig wird die Klasse .active angewendet, wenn ich auf divs klicke, die ebook image 1, ebook image 2, ebook image 3 wie vorgesehen lesen.

Was ich tun möchte, ist die .active Klasse zu entfernen, wenn ich auf das div selbst klicke, was es gerade nicht tut.

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

Kürzeste Option, soweit ich das beurteilen kann. Verfeinern Sie den Selektor mithilfe von .not(this), und schalten Sie dann die Klasse für das Element selbst ein.

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

Hier ist eine Arbeitslösung, jemand in der Lage sein könnte, die Lösung zu vereinfachen, aber es funktioniert.

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

Ist es so etwas? 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

Versuchen Sie folgendes:

$(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(); 
    }); 
});