Question

如何从if属性中使用自定义属性获取值？我想在show＆amp; amp;之间切换按钮隐藏如果单击show按钮，它将隐藏并显示隐藏按钮。对立面也是如此。所以我可以为我的div做隐藏。

这是我的代码

<div class="wrapper">
<a class="show_detail" target="1" style="display:block">+ Show</a>
<a class="hide_detail" target-hide="1" style="display:none">- Hide</a>
<div class="event_down" id="event_down1" style="display:none">
Content 1
</div>
<a class="show_detail" target="2" style="display:block">+ Show</a>
<a class="hide_detail" target-hide="2" style="display:none">- Hide</a>

<div class="event_down" id="event_down2" style="display:none">
    Content 2
</div>

<a class="show_detail" target="3" style="display:block">+ Show</a>
<a class="hide_detail" target-hide="3" style="display:none">- Hide</a>

<div class="event_down" id="event_down3" style="display:none">
    Content 3
</div>
</div>

CSS：

.show_detail{cursor:pointer; color:red;}
.hide_detail{cursor:pointer; color:red;}

JS：

$('.show_detail').click(function(){
        var atribut_show = $('.show_detail').attr('target');
        var atribut_hide = $('.hide_detail').attr('target-hide');
        if (atribut_show == atribut_hide){
        $('.hide_detail').show();
        $(this).hide();
        }
        $('.event_down').hide();
        $('#event_down'+$(this).attr('target')).show();
    });

这里的MY FIDDLE需要你的帮助来解决它。

Answer 1

为了获得自定义属性，他们的名字必须以“data-”开头。例如，您的自定义属性目标将是“数据目标”。之后，您可以使用$（“＃myElement”）。getAttribute（“data-target”）等来获取它们。

Answer 2

以下javascript让它对我有用。但是，您应该考虑调用属性data-target和data-target-hide，因为您指定的属性实际上并不有效。它将起作用，但如果不更改属性名称，则可能会遇到问题。

$('.show_detail').click(function(){
        var atribut_show = $(this).attr('target');
        $('.hide_detail[target-hide="'+atribut_show+'"]').show();
        $(this).hide();
        $('#event_down'+atribut_show).show();
    });

$('.hide_detail').click(function(){
        var atribut_hide = $(this).attr('target-hide');
        $('.show_detail[target="'+atribut_hide+'"]').show();
        $(this).hide();
        $('#event_down'+atribut_hide).hide();
    });

Answer 3

您正在获取对象数组列表，您必须只获取当前对象检查更新的小提琴

“http://jsfiddle.net/p7Krf/3/”

$('.show_detail').click(function(){
    var atribut_show = $(this).attr('target');
    $('.hide_detail').each(function(element){
       if($(this).attr("target-hide")==atribut_show){
            $(this).show();
        }
    });
    $(this).hide();
   $('#event_down'+atribut_show).show();
});

Jquery显示隐藏属性

3 个答案: