問題使用jQuery切換div

Question

我有一個div，如果點擊切換另一個div在頁面下方。

這是應該做的觸發的div HTML：

<div id="ch_display_linkedin_icon" class="asw-switch-link"> 
<a class="link-true active" rel="true" href="#"></a> 
<a class="link-false" rel="false" href="#"></a> 
</div> 

你會發現link-true類有 active另一個屬性。如果單擊div，則會由另一種jQuery技術添加。

此刻a與active類是活動div。

我想要做的就是進一步改變另一個div的價值了一個名爲#LinkedIn依賴的#ch_display_linkedin_icon

基本上我想說值的頁面，如果

<a class="link-true active" rel="true" href="#"></a> 

有類的active然後顯示#LinkedIn DIV否則如果

<a class="link-false active" rel="false" href="#"></a> 

具有active然後隱藏#LinkedIn div。

我需要做的是使用jQuery能夠獲得ch_display_linkedin_icon的值，並只顯示#LinkedIn div如果它有活動類。

已經開始與

$('#ch_display_linkedin_icon').live("click", function() { 
}); 

但我不知道如何讓一個的子元素。

任何幫助將不勝感激。

Answer 1

我會做這樣的事情：

$(document).on('click', '#ch_display_linkedin_icon', function() { 
    $('#LinkedIn').toggle($('a.link-true.active', this).length > 0); 
}); 

理想的情況下，與包含#ch_display_linkedin_icon元素的選擇替換document。

如果#ch_display_linkedin_icon是不被動態由JavaScript生成的，可以簡化代碼一點：

$('#ch_display_linkedin_icon').click(function() { 
    $('#LinkedIn').toggle($('a.link-true.active', this).length > 0); 
}); 

Answer 2

使用此

$(document).ready(function() { 
     $('#LinkedIn').hide(); 
     /* This is the code to toggle the checkbox */ 
     $('.asw-switch-link a').live('click',function(){ 
      var $tag = $(this).parent(); 
      $('a',$tag).toggleClass('active'); 
      var rel = $('a.active',$tag).attr('rel'); 
      $tag.next('.plugin-switch-value').val(rel); 
      if ($('#display_linkedin_icon').val() != 'true') { 
      $('#LinkedIn').show(); 
      }else{ 
       $('#LinkedIn').hide(); 
      } 

      return false; 
     }); 

     $('#ch_display_linkedin_icon').click(function() { 
      $('#LinkedIn').toggle($('a.link-true.active', this).length > 0); 
     }); 
    }); 

看到fiddle