jQuery点击切换列表中的DIV，并且一次只显示一个，而.dblclick（）中的同一个div使用不同的切换？

Question

我有一个水平的封面列表，如果你点击它们中的任何一个，它会切换并显示背面，但是一次只能切换一次。但是，如果您双击前盖，它也会切换显示不同的背面。

第一个切换工作，一次只显示一个。但dblClick上的第二个切换不起作用。我不确定是否需要明确使用onClick来更好地编写第一个切换键，或者如果第二个切换键不可行？

的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); 
    } 
    }); 
}) 

Answer 1

我已经简化了你的代码

http://jsfiddle.net/HkwTg/1/

的toggleClass工作在双击，你可以看到它在萤火虫，我edi定下它，文字变成绿色。你应该处理单击jquery