0

表紙の水平リストがあります。それらのいずれかをクリックすると、切り替えて背面が表示されますが、一度に切り替えられるのは 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);
    }
  });
})
4

1 に答える 1

0

私はあなたのコードを単純化しました

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

toggleClass はダブルクリックで動作します。firebug で確認できます。テキストが緑色に変わるように編集しました。jqueryでシングルクリックを処理する必要があります

于 2012-10-05T21:04:07.193 に答える