[javascript] 가시성을 설정하는 jQuery .hide ()와 동일 : hidden

JAVASCRIPT / 글쓴이

jQuery를에가 .hide()와 .show()는 CSS 설정 방법 display: none설정.

visibility: hidden설정을 설정 하는 동등한 기능이 있습니까?

사용할 수는 .css()있지만 어떤 기능은 선호합니다 .hide(). 감사.

답변

당신은 당신의 자신의 플러그인을 만들 수 있습니다.

jQuery.fn.visible = function() {
    return this.css('visibility', 'visible');
};

jQuery.fn.invisible = function() {
    return this.css('visibility', 'hidden');
};

jQuery.fn.visibilityToggle = function() {
    return this.css('visibility', function(i, visibility) {
        return (visibility == 'visible') ? 'hidden' : 'visible';
    });
};

원래 jQuery를 오버로드하려면 toggle()권장하지 않습니다 …

!(function($) {
    var toggle = $.fn.toggle;
    $.fn.toggle = function() {
        var args = $.makeArray(arguments),
            lastArg = args.pop();

        if (lastArg == 'visibility') {
            return this.visibilityToggle();
        }

        return toggle.apply(this, arguments);
    };
})(jQuery);

jsFiddle .

답변

내장되어 있지 않지만 자신만의 것을 쉽게 작성할 수 있습니다.

(function($) {
    $.fn.invisible = function() {
        return this.each(function() {
            $(this).css("visibility", "hidden");
        });
    };
    $.fn.visible = function() {
        return this.each(function() {
            $(this).css("visibility", "visible");
        });
    };
}(jQuery));

그런 다음 이렇게 호출 할 수 있습니다.

$("#someElem").invisible();
$("#someOther").visible();

다음은 실제 예제 입니다.

답변

더 간단한 방법은 jQuery의 toggleClass () 메소드 를 사용 하는 것입니다.

CSS

.newClass{visibility: hidden}

HTML

<a href="#" class=trigger>Trigger Element </a>
<div class="hidden_element">Some Content</div>

JS

$(document).ready(function(){
    $(".trigger").click(function(){
        $(".hidden_element").toggleClass("newClass");
    });
});

답변

현재 레이아웃을 유지하기 위해 visible : hidden을 사용하여 hide의 표준 기능 만 필요한 경우 hide의 콜백 함수를 사용하여 태그의 CSS를 변경할 수 있습니다. jquery에서 문서 숨기기

예 :

$('#subs_selection_box').fadeOut('slow', function() {
      $(this).css({"visibility":"hidden"});
      $(this).css({"display":"block"});
});

이것은 일반적인 멋진 애니메이션을 사용하여 div를 숨기지 만 애니메이션이 끝나면 가시성을 숨김으로 설정하고 표시를 차단합니다.

예 : http://jsfiddle.net/bTkKG/1/

$ ( “# aa”). css () 솔루션을 원하지 않았지만 css () 메서드 만 사용하여 애니메이션을 잃어 버렸기 때문에 지정하지 않았습니다.

답변

다음은 하나의 구현으로 작동 $.prop(name[,value])하거나 $.attr(name[,value])기능하는 것입니다. 경우 b변수가 작성되고, 가시성이에 따라 설정되고, this그렇지 않으면 가시성 값을 반환 (다른 속성을 계속 할 수 있도록) 반환됩니다.

jQuery.fn.visible = function (b) {
    if(b === undefined)
        return this.css('visibility')=="visible";
    else {
        this.css('visibility', b? 'visible' : 'hidden');
        return this;
    }
}

예:

$("#result").visible(true).on('click',someFunction);
if($("#result").visible())
    do_something;

답변

jQuery hide () / show ()와 동등한 순수 JS :

function hide(el) {
    el.style.visibility = 'hidden';
    return el;
}

function show(el) {
    el.style.visibility = 'visible';
    return el;
}

hide(document.querySelector(".test"));
// hide($('.test')[0])   // usage with jQuery

유창한 인터페이스 “desing pattern” return el을 만족시키기 위해 사용 합니다.

다음은 실제 예제 입니다.

아래에서는 또한 매우 권장되지 않는 대안을 제공 하지만 아마도 “질문에 더 가까운”대답 일 것입니다.

HTMLElement.prototype.hide = function() {
    this.style.visibility = 'hidden';
    return this;
}

HTMLElement.prototype.show = function() {
    this.style.visibility = 'visible';
    return this;
}

document.querySelector(".test1").hide();
// $('.test1')[0].hide();   // usage with jQuery

물론 이것은 순수한 js를 사용하기 때문에 jQuery ‘each'( @ JamesAllardice 답변으로 제공)를 구현하지 않습니다 .

실제 예제는 여기에 있습니다 .

답변