javascript - Jquery 显示隐藏属性

Question

如何从自定义属性中获取值以用于 if else 条件？ 我想在 show & hide 之间切换按钮。如果单击显示按钮，它将隐藏并显示隐藏按钮。对立面也一样。 所以我可以为我的 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") 之类的方法获取它们。