jQuery如何顯示下一個div

我不知道點擊Clickbox時如何顯示下一個div（.hide）。jQuery如何顯示下一個div

這是我的jQuery代碼：

 $(function(){ 
      $('.form input[type=checkbox]').each(function() 
       { 
       $(this).change(function() 
        { 
        if($(this).is(':checked')) 
         { 
         $(this).next('div.hide').css('display', 'block'); 
         } 
        else 
         { 
         $(this).next('div.hide').css('display', 'block'); 
         } 
        }); 
       }); 
     });

來源

2013-10-10 Evolutio

你的if語句是完全無用這裏 – Oliboy50

爲什麼要用'的.css（ '顯示'， '塊'）'如果你有'.show（）' –

這是下一個div在這裏？有'藏'的那個？ –

.hide分頻器不在您的輸入附近。您需要首先找到包含輸入元素的分頻器，然後撥打.next()。我已將您的代碼精簡爲：

$('input[type=checkbox]').change(function() { 
    $(this) /* The checkbox */ 
     .closest('div') /* The input's ancestor divider (".form_checkboxes"). */ 
     .next() /* The divider next to the ancestor divider. */ 
     .toggleClass('hide') /* Toggle the class "hide". */ 
    ; 
});

JSFiddle demo。

來源

2013-10-10 10:05:50

感謝偉大的作品:) – Evolutio

工作演示http://jsfiddle.net/wjkEy/

我在其他人發出了在您提供的JS代碼display:none小的變化代碼，你可以簡單地使用.show或.hide。

這應該符合您的需要:)

代碼

$(function() { 
    $('input[type=checkbox]').each(function() { 
     $(this).change(function() { 
      if ($(this).is(':checked')) { 
       $(this).parents('.checkbox').find('.hide').css('display', 'block'); 
      } else { 
       $(this).parents('.checkbox').find('.hide').css('display', 'none'); 
      } 
     }); 
    }); 
});

來源

2013-10-10 10:03:39

這樣做：

$(this).closest('.hide').nextAll('.hide').eq(0).show();

來源

2013-10-10 10:04:02

它可以簡單到

$(function() { 
    $('input[type=checkbox]').change(function() { 
     $(this).closest('.checkbox').find('.hide').toggle(this.checked) 
    }).filter(':checked').change(); 
});

演示：Fiddle

來源

2013-10-10 10:04:54

這將幫助你

$(document).ready(function() { 

     $('#checkbox').change(function() { 
      if($(this).is(":checked")) { 
      // do something... 
     } 
    else{ 
      //do something... 
     } 

    }); 
});

看看這個演示 JSFiddle

來源

2013-10-10 10:07:52

試試這個

$(function(){ 
    $('input[type=checkbox]').change(function() { 
     $(this).closest('div').siblings("div").toggleClass('hide'); 
    }); 
});

Demo

來源

2013-10-10 10:08:30 Amit

使用此功能：

$(document).ready(function() { 
     $('input[type=checkbox]').change(function() { 
      $('.hide').toggle(); 
     }); 
    });

你甚至可以添加轉換到它。像fadeIn或fadeOut或其他任何與jQueryUI。

更多信息：jQuery UI - EFfects

來源

2013-10-10 10:13:53

jQuery如何顯示下一個div

回答

相關問題