图像作为复选框

Question

现在我有一个应用程序，您可以在其中 select 图片。当我 select 这些图像之一和 "save" 它们并返回到相同的菜单时，我无法再删除 select 或 select 任何东西。但我不知道为什么，所以当您单击 list-item 和 select 图像并单击按钮时 return 到图像复选框。

现在您不能再select任何图像这里是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');
});

Answer 1

您在页面显示时一次又一次地分配点击处理程序。

因此第二次显示页面时，class 被切换了两次（您可以在向点击事件添加 console.log() 时看到此行为）。

一个快速解决方法是在分配之前删除点击处理程序。

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

已更新fiddle：

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

您的 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');

工作 fiddle 在这里 http://jsfiddle.net/nileshyadav987/3wpotv2n/18/

图像作为复选框

Image as checkboxes

javascript

jquery

jquery-mobile