1つの要素をダブルクリックすると別の要素が選択される

Question

非常に単純なhtml/css/jsで画像スクローラーを書いた：右のボタンがクリックされ、「ホルダー」内のすべての画像を通過する-divと変更classname = "current"のクラスの後のイメージのクラス

しかし、それはどこに問題があるのではないと私は思います。左または右ボタンを連続してクリックすると、divの画像が選択されます（青の選択ボックス）。左ボタンを続けてクリックすると、上のテキストまで選択されます。

<div class="grid_4 omega image_box"> 
    <div id="txt_choose" class="image_txt"> 
     this is helpful text 
    </div> 
    <div id="alt_spacer"></div> 
    <div id="image_content" class="image_content" onclick="chooseImageType(this)"> 
     <div id="current" class="current"><img src="images/default1.png" /></div> 
     <div id="current" class="hidden"><img src="images/default2.png" /></div> 
    </div> 
    <!--- left button ---> 
    <div class="image_btn_left" onclick="showPrev()"></div> 

    <!--- right button ---> 
    <div class="image_btn_right" onclick="showNext()"></div> 
</div> 

、これはCSSです：リクエストに応じて

.image_btn_right 
{ 
    width   : 20px; 
    height   : 20px; 
    position  : relative; 
    float   : left; 
    margin-top  : -170px; 
    margin-left  : 260px; 
    z-index   : 4; 
    cursor   : pointer; 
    background-image: url('../images/right.png'); 
} 
.image_btn_left 
{ 
    width   : 20px; 
    height   : 20px; 
    position  : relative; 
    float   : left; 
    margin-top  : -170px; 
    margin-left  : 20px; 
    z-index   : 4; 
    cursor   : pointer; 
    background-image: url('../images/left.png'); 
} 
.image_content 
{ 
    height   : 280px; 
    background-color: white; 
    margin   : 10px; 
} 

、私のjavascript：

function showNext() 
{ 
//vars 
var shown = false; 
var current; 

$('#image_content > div').each(function() 
{ 
    if($(this).attr('class') == "current") 
    { 
     current = $(this); 
     shown = true; 
    } 
    else if($(this).attr('class') == "hidden" && shown == true) 
    { 
     current.hide(); 
     current.attr('class', 'prev'); 
     current.attr('id', ''); 
     $(this).show(); 
     $(this).attr('class', 'current'); 
     $(this).attr('id', 'current'); 
     shown = false; 
    } 
}); 
} 

は、画像と上記のテキストを止めるためにとにかくありますが、（そのように選択します実際にそれらを選択できないようにする必要はありません）？ ボタンの相対的な位置とそのZ-インデックスのためかもしれません。

Answer 1

私は答えを発見し、それが痛いほど簡単だった...> _>

私はちょうど別のdiv内のボタンをラップするために必要なので、彼らはより多くのeperatedになりました残りのhtml。そのよう

：

<div> 
    <!--- left button ---> 
    <div class="image_btn_left" onclick="showPrev()"></div> 

    <!--- right button ---> 
    <div class="image_btn_right" onclick="showNext()"></div> 
</div> 

Answer 2

これはあなたのJSフィドルで動作します。

function showNext() 
{ 

    //vars 
    var shown = false; 
    var current; 
    window.getSelection().removeAllRanges(); 
    $('#image_content > div').each(function() 
    { 
     if($(this).attr('class') == "current") 
     { 
      current = $(this); 
      shown = true; 
     } 
     else if($(this).attr('class') == "hidden" && shown == true) 
     { 
      current.hide(); 
      current.attr('class', 'prev'); 
      current.attr('id', ''); 
      $(this).show(); 
      $(this).attr('class', 'current'); 
      $(this).attr('id', 'current'); 
      shown = false; 
     } 
    }); 
} 

function showPrev() 
{ 
window.getSelection().removeAllRanges(); 
    //vars 
    var prev_present = false; 
    var prev; 

    $('#image_content > div').each(function() 
    { 
     if($(this).attr('class') == "prev") 
     { 
      prev   = $(this); 
      prev_present = true; 
     } 
     else if($(this).attr('class') == "current" && prev_present == true) 
     { 
      $(this).hide(); 
      $(this).attr('class', 'hidden'); 
      $(this).attr('id', ''); 
      prev.show(); 
      prev.attr('class', 'current'); 
      prev.attr('id', 'current'); 
      prev_present = false; 
     } 
    }); 
} 

よろしく ジョナス