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。

我想要做的是根据#LinkedIn

的值更改名为#ch_display_linkedin_icon的页面下方另一个div的值

基本上我想说，如果

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

但我不确定如何获取a的子元素。

非常感谢任何帮助。

Answer 1

我会做这样的事情：

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

理想情况下，将document替换为包含#ch_display_linkedin_icon的元素的选择器。

如果#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

发出使用jQuery切换div的问题

2 个答案: