表紙の水平リストがあります。それらのいずれかをクリックすると、切り替えて背面が表示されますが、一度に切り替えられるのは 1 つだけです。ただし、表紙をダブルクリックすると、別の表紙が表示されます。
最初のトグルは機能し、一度に 1 つだけ表示されます。しかし、2番目のトグルはdblClick
機能しません。明示的に使用して最初のトグルをより適切に記述する必要があるのonClick
か 、それとも2番目のトグルがとにかく不可能なのかわかりませんか?
HTML
<div id="cover-wrapper">
<ul class="covers">
<li class="cover" id="remove-cover">
<div class="cover-front">
<a href="javascript:showonlyone('show-back1');" >
<img src="images/covers/1.png" />
</a>
</div>
<div class="cover-back" id="show-back1">
<div class="content">
<!-- content here... -->
</div>
</div>
</li>
<li class="cover" id="remove-cover">
<div class="cover-front">
<a href="javascript:showonlyone('show-back2');" >
<img src="images/covers/2.png" />
</a>
</div>
<div class="cover-back" id="show-back2">
<div class="content">
<!-- content here... -->
</div>
</div>
</li>
Javascript
//Toggle cover on click from front to back & only ever show one toggled from list
function showonlyone(thechosenone) {
$(".cover-back").each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).fadeIn(0);
} else {
$(this).fadeOut(0);
}
}
});
//Toggle cover on dblclick from front to back with different back div
$(document).ready(function() {
$("li.cover").dblclick(function() {
if ($(this).hasClass("cover-back-2")) {
$(this).toggleClass("cover-back-2", false);
} else {
$(this).toggleClass("cover-back-2", true);
}
});
})