画像をチェックボックス

Question

ここで画像を選択できるアプリケーションがあります。これらの画像の1つを選択して「保存」し、同じメニューに戻ると、私は何も選択を解除したり、何も選択することができなくなります。しかし私は理由を知らないので、list-itemをクリックし、画像を選択してボタンをクリックすると画像チェックボックスに戻るよりも、

ここで画像を選択することはできません。問題を再現するFIDDLEです。

$(document).on("pageshow","#transport",function(){ 

$.fn.checkedFunction = function(Clicked, Checked){ 
    $(this).click(function(){ 
     $(Clicked).toggleClass(Checked); 
    }); 
} 

    $('.checkbox-car').checkedFunction('.checkbox-car','checked-car'); 
    $('.checkbox-bus').checkedFunction('.checkbox-bus','checked-bus'); 
    $('.checkbox-train').checkedFunction('.checkbox-train','checked-train'); 
    $('.checkbox-metro').checkedFunction('.checkbox-metro','checked-metro'); 
    $('.checkbox-tram').checkedFunction('.checkbox-tram','checked-tram'); 
    $('.checkbox-boat').checkedFunction('.checkbox-boat','checked-boat'); 
}); 

Answer 1

ページが表示されているときは、何度も何度もクリックハンドラを割り当てる：

は、ここで私が書いたJavaScript関数です。

ページが2度表示されるので、クラスは2回切り替わります（クリックイベントにconsole.log()を追加するとこの現象が見られます）。

クイックフィックスは、クリックハンドラを割り当てる前に削除することです。

$.fn.checkedFunction = function(Clicked, Checked) { 
    $(this).off('click'); // <- !!!! 
    $(this).click(function() { 
    $(Clicked).toggleClass(Checked); 
    }); 
} 

更新フィドル：

http://jsfiddle.net/3wpotv2n/15/

Answer 2

$(document).on("pageshow","#transport",function(){ 
 

 
    
 
    
 
}); 
 

 

 
$(document).ready(function(){ 
 

 
    $.fn.checkedFunction = function(Clicked, Checked){ 
 
     $(this).click(function(){ 
 
      $(Clicked).toggleClass(Checked); 
 
     }); 
 
    } 
 

 

 
$('.checkbox-car').checkedFunction('.checkbox-car','checked-car'); 
 
    $('.checkbox-bus').checkedFunction('.checkbox-bus','checked-bus'); 
 
    $('.checkbox-train').checkedFunction('.checkbox-train','checked-train'); 
 
    $('.checkbox-metro').checkedFunction('.checkbox-metro','checked-metro'); 
 
    $('.checkbox-tram').checkedFunction('.checkbox-tram','checked-tram'); 
 
    $('.checkbox-boat').checkedFunction('.checkbox-boat','checked-boat'); 
 
});//document ready

.select { 
 
    float: left; 
 
    margin: 5px 50px 0 0 !important; 
 
} 
 

 
.checkbox-wrapper { 
 
    margin: 20px; 
 
} 
 

 
.checkbox-first-row { 
 
    display: inline-block; 
 
    margin-top: 20px; 
 
} 
 

 
.checkbox-second-row { 
 
    display: inline-block; 
 
    margin-top: 40px; 
 
} 
 
.text-below { 
 
    display: block; 
 
    margin-top: 70px; 
 
    text-align: center; 
 
} 
 

 
.checkbox-car { 
 
    width: 60px; 
 
    height: 60px; 
 
    background: transparent url('https://www.princessyachts.com/css/images/icons/apple-touch-icon-60x60.png') no-repeat; 
 
    margin-left: 20px; 
 
} 
 

 
.checked-car { 
 
    background: transparent url('https://ic.tweakimg.net/usericons/106790/Youtube.png') no-repeat; 
 
} 
 

 
.checkbox-bus { 
 
    width: 60px; 
 
    height: 60px; 
 
    background: transparent url('https://www.princessyachts.com/css/images/icons/apple-touch-icon-60x60.png') no-repeat; 
 
    margin-left: 50px; 
 
    margin-right: 50px; 
 
} 
 

 
.checked-bus { 
 
    background: transparent url('https://ic.tweakimg.net/usericons/106790/Youtube.png') no-repeat; 
 
} 
 

 
.checkbox-train { 
 
    width: 60px; 
 
    height: 60px; 
 
    background: transparent url('https://www.princessyachts.com/css/images/icons/apple-touch-icon-60x60.png') no-repeat; 
 
} 
 

 
.checked-train { 
 
    background: transparent url('https://ic.tweakimg.net/usericons/106790/Youtube.png') no-repeat; 
 
} 
 

 
.checkbox-metro { 
 
    width: 60px; 
 
    height: 60px; 
 
    background: transparent url('https://www.princessyachts.com/css/images/icons/apple-touch-icon-60x60.png') no-repeat; 
 
    margin-left: 20px; 
 
} 
 

 
.checked-metro { 
 
    background: transparent url('https://ic.tweakimg.net/usericons/106790/Youtube.png') no-repeat; 
 
} 
 

 
.checkbox-tram { 
 
    width: 60px; 
 
    height: 60px; 
 
    background: transparent url('https://www.princessyachts.com/css/images/icons/apple-touch-icon-60x60.png') no-repeat; 
 
    margin-left: 50px; 
 
    margin-right: 50px; 
 
} 
 

 
.checked-tram { 
 
    background: transparent url('https://ic.tweakimg.net/usericons/106790/Youtube.png') no-repeat; 
 
} 
 

 
.checkbox-boat { 
 
    width: 60px; 
 
    height: 60px; 
 
    background: transparent url('https://www.princessyachts.com/css/images/icons/apple-touch-icon-60x60.png') no-repeat; 
 
} 
 

 
.checked-boat { 
 
    background: transparent url('https://ic.tweakimg.net/usericons/106790/Youtube.png') no-repeat; 
 
} 
 

 
.checkbox-btn {  
 
    text-align: left !important;  
 
    color: white !important; 
 
    text-shadow: none !important; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    
 
    <head> 
 
     <title>JQM latest</title> 
 
     <meta charset="utf-8"> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/git/jquery.mobile-git.css"> 
 
     <script src="http://code.jquery.com/jquery-1.10.2.js"></script> 
 
     <script src="http://code.jquery.com/mobile/git/jquery.mobile-git.js"></script> 
 
    </head> 
 
    
 
    <body> 
 
     <!-- Page 1 --> 
 
     <!-- <div data-role="page" id="dashboard" class="background"> 
 
      <a href="#settings" class="ui-btn-right settings-icon" data-transition="slide"> 
 
      <img src="http://image.flaticon.com/icons/svg/17/17214.svg" alt=""> 
 
      </a> 
 
     </div> --> 
 
     
 
     
 
     <div data-role="page" id="settings" class="background"> 
 
     <div data-role="header" class="header settings-header"> 
 
      <h1 class="page-header">Instellingen</h1> 
 
     </div> 
 
     
 
     <div data-role="main" class="listBlock"> 
 
      <ul data-role="listview" class="setting-list"> 
 
      <li class="ui-li"><a href="#transport" class="list-menu" data-transition="slide"><img src="http://image.flaticon.com/teams/1-freepik.jpg" alt="route" class="ui-li-icon ui-icon-route ui-corner-none ui-li-thumb">Route naar de luchthaven</a></li> 
 
      
 
      
 
    
 
      </ul> 
 
     </div> 
 
     </div> 
 
     
 
     <!--ROUTE AIRPORT FORM_BLOCK--> 
 
     <div data-role="page" id="transport" class="background"> 
 
    
 

 
      <div class="checkbox-wrapper">   
 
      <div class="checkbox-car checkbox-first-row"> 
 
       <span class="text-below">auto/taxi</span> 
 
      </div> 
 
      
 
      <div class="checkbox-bus checkbox-first-row"> 
 
       <span class="text-below">bus</span> 
 
      </div> 
 

 
      <div class="checkbox-train checkbox-first-row"> 
 
       <span class="text-below">trein</span>     
 
      </div> 
 

 
      <div class="checkbox-metro checkbox-second-row"> 
 
       <span class="text-below">metro</span> 
 
      </div>     
 
      <div class="checkbox-tram checkbox-second-row"> 
 
       <span class="text-below">tram</span> 
 
      </div>     
 
      <div class="checkbox-boat checkbox-second-row"> 
 
       <span class="text-below">boot</span> 
 
      </div> 
 
      
 
      <a href="#settings" class="checkbox-btn checkbox-btn-save" data-transition="slide" data-role="button" data-icon="arrow-r" data-iconpos="right"> 
 
       Bewaar gegevens 
 
      </a> 
 
      </div> 
 
     </div>  
 
     
 
     
 
     
 
     
 
     
 
     
 
     
 
    </body> 
 

 
</html>

Answer 3

これは

$.fn.checkedFunction = function(Clicked, Checked){ 
    $(this).click(function(){ 
    $(Clicked).toggleClass(Checked); 
    }); 
} 
$('.checkbox-car').checkedFunction('.checkbox-car','checked-car'); 
$('.checkbox-bus').checkedFunction('.checkbox-bus','checked-bus'); 
$('.checkbox-train').checkedFunction('.checkbox-train','checked-train'); 
$('.checkbox-metro').checkedFunction('.checkbox-metro','checked-metro'); 
$('.checkbox-tram').checkedFunction('.checkbox-tram','checked-tram'); 
$('.checkbox-boat').checkedFunction('.checkbox-boat','checked-boat'); 

あなたのjavascriptはほとんど変化あり

作業中のフィドルはこちらhttp://jsfiddle.net/nileshyadav987/3wpotv2n/18/