jQueryがdivを選択しています

Question

解決できない本物の問題が発生しました：x クリックしたdivに「selected」クラスを追加し、buttonのinner htmlをclicked divのIDに変更する関数があります。しかし、同じdivをダブルクリックすると、選択されたクラスが削除され、ボタンの内部HTMLは変更されません。選択したdivを選択解除することができないようにしたり、選択したdivを選択解除することを不可能にすることができます。

          <div class="col-md-3"> 
              <button id="id" class="btn btn-block" style="font-weight: bold; cursor: default;">ID</button> 
             </div> 

すべてのヘルプを次のようになります。ボタンは、私が変更したいのですそれ

$(function(){ 
    $(".panel-kol").click(function() { 
    var mid = $(this).attr('mid'); 

    if ($(this).hasClass('selected')) { 
      $(this).removeClass('selected'); 
    } 
    else { 
     $('.selected').removeClass('selected'); 
     $(this).addClass('selected'); 
    } 


    document.getElementById("id").innerHTML = mid; 

    }); 
}); 

HTMLをPHPで生成された私は、ページの一例を投稿しそうである」ソース

<div class="col-md-3"><div class="panel panel-kol" mid="2"><div class="panel-body profile white"> 
           <div class="profile-image"><img src="../assets/images/users/female.svg" alt="Osoba"></div> 
           <div class="profile-data"> 
            <div class="profile-data-name" style="font-weight: bold;">Agata Jacynów</div> 

            <div class="profile-data-title">Lekarz</div> 
           </div> 
          </div>         
          <div class="panel-body">          
           <div class="contact-info text-center" style="margin-top: -20px;"> 
            <p><small>Telefon komórkowy</small><br/>666333999</p> 
            <p><small>Od - Do</small></p> 
            <div class="row"> 
            <div class="col-md-2"></div> 
            <div class="col-md-4"> 
             <div class="input-group"> 
              <input type="text" class="form-control" value="07:00:00"/> 
             </div> 
            </div> 
            <div class="col-md-4"> 
             <div class="input-group"> 
              <input type="text" class="form-control" value="14:00:00"/> 
             </div> 
            </div> 
            <div class="col-md-2"></div> 
           </div>    
         </div> 
        </div> 
       </div> 

：ここに私のコードです非常に感謝！

Answer 1

だけexisintng ifに配置し、いつでもあなた非選択divたかった何に設定します。

$(function() { 
    $(".panel-kol").click(function() { 
     if ($(this).hasClass('selected')) { 
      $(this).removeClass('selected'); 
      $("#id").text("ID"); // change the text here as you like 
     } 
     else { 
      $('.selected').removeClass('selected'); 
      $(this).addClass('selected'); 
      $("#id").text($(this).attr('mid')); 
     } 
    }); 
}); 

Answer 2

ダブルクリックイベントをキャッチして以前の機能の開始を試みることができます。

$(".panel-kol").on("dblclick", function(e){ 
    e.preventDefault(); 
    return; 
});