jQuery显示隐藏属性

Question

How to get value from custom attribute to be used in if else condition? I want to switch button between show & hide . if show button clicked it will hiden and the hide button showed. And also the same for opposites. So i can do show hide for my divs.

Here's my codes

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

and here's MY FIDDLE need your help to solve it.

Answer 1

in order to get custom attributes their name must start with "data-". For example your custom attribute target would be "data-target". After that you can get them using something like $("#myElement").getAttribute("data-target").

Answer 2

The following javascript made it function for me. You should however consider calling your attributes data-target and data-target-hide as your specified attributes are not actually valid. It will function, but you could run into problems if you don't change the attribute names.

$('.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

You are getting object array list you have to get only the current object Check updated fiddle here

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