Question

现在我有一个应用程序，您可以在其中选择图像。当我选择其中一个图像并“保存”它们并返回相同的菜单时，我无法取消选择或选择任何内容。但我不知道为什么，所以当你点击list-item而不是选择图像并单击按钮而不是返回图像复选框时。

现在你不能再选择任何图像了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

您正在显示页面时反复分配点击处理程序。

因此，第二次显示页面时，类会切换两次（当您向click事件添加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

这是你的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/

图像作为复选框

3 个答案: