Jquery显示隐藏属性

Jquery Show Hide with attribute

本文关键字：属性 隐藏 显示 Jquery      更新时间：2023-09-26

如何从自定义属性中获得要在其他条件下使用的值?我想在show &躲起来。如果显示按钮点击它将隐藏和隐藏按钮显示。对反义词也是一样。所以我可以为div设置show hide

这是我的代码

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

为了获得自定义属性，它们的名称必须以"data-"开头。例如，您的自定义属性目标是"data-target"。之后你可以使用$("#myElement"). getattribute ("data-target")来获取它们。

您正在获得对象数组列表，您必须仅获得当前对象查看此处更新的小提琴

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

下面的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();
    });
相关文章：