jQuery顯示隱藏屬性

Question

如何從自定義屬性中獲取要在其他情況下使用的值？ 我想在顯示和隱藏之間切換按鈕。 如果單擊顯示按鈕，它將隱藏並顯示隱藏按鈕。 對立面也一樣。 所以我可以為我的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();
    });

這是我的兄弟需要您的幫助來解決。

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