0

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

第一个切换有效，一次只显示一个。但是第二次切换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);
    }
  });
})
4

1 回答 1

0

我已将您的代码简化为

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

The toggleClass works on double click, you can see it in firebug, i edited it so the text turns to green. You should handle the single click in jquery

于 2012-10-05T21:04:07.193 回答