Image as checkbox

Теперь у меня есть приложение, где вы можете выбрать изображения. Когда я выбираю одно из этих изображений и «сохраняю» их и возвращаюсь в одно и то же меню, я больше не могу отменить выбор или выбрать что-либо. Но я не знаю, почему, поэтому, когда вы нажимаете list-item, а затем выберите изображение и нажмите кнопку, а не верните флажки.Image as checkbox

Теперь вы не можете выбрать какое-либо изображение больше здесь FIDDLE, что воссоздает проблему.

Вот Javascript функция я писал:

$(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'); 
});

источник

2016-12-21 Sreinieren

Использовать '$ (document) .on (" pagecreate "," #transport ", function() {...' – deblocker

@deblocker Почему это так? – Sreinieren

deblocker ответил на ваш вопрос. – Omar

Вы назначаете обработчик щелчка снова и снова, когда страница отображается.

Итак, во второй раз, когда страница отображается, класс переключается дважды (вы можете видеть это, когда вы добавляете console.log() к событию клика).

Быстрое исправление заключается в удалении обработчика щелчка перед его назначением.

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

Обновлено скрипку:

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

источник

2016-12-21 10:53:04

Почему это так, потому что селектор всегда вызывает эту функцию? – Sreinieren

Действительно, '' pageshow'' выполняется каждый раз, когда отображается страница. –

Изменить 'pageshow' на' pagecreate' - правильный ответ. – Omar

$(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>

источник

2016-12-21 10:58:28

Это небольшое изменение в вашем JavaScript

$.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');

Рабочая скрипка здесь http://jsfiddle.net/nileshyadav987/3wpotv2n/18/

источник

2016-12-21 11:02:11

В вашей скрипке ничего не изменилось и как ваш ответ – Sreinieren

Обновленный URL-адрес скрипта, пожалуйста, проверьте сейчас –

ответ

Смежные вопросы