[javascript] JavaScript 숨기기 / 표시 요소

‘편집’링크를 누르면 어떻게 숨길 수 있습니까? 편집을 누를 때 “lorem ipsum”텍스트를 숨길 수 있습니까?

<script type="text/javascript">
function showStuff(id) {
  document.getElementById(id).style.display = 'block';
}
</script>


<td class="post">

  <a href="#" onclick="showStuff('answer1'); return false;">Edit</a>
  <span id="answer1" style="display: none;">
    <textarea rows="10" cols="115"></textarea>
  </span>

  Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
</td>

답변

function showStuff(id, text, btn) {
    document.getElementById(id).style.display = 'block';
    // hide the lorem ipsum text
    document.getElementById(text).style.display = 'none';
    // hide the link
    btn.style.display = 'none';
}

<td class="post">

<a href="#" onclick="showStuff('answer1', 'text1', this); return false;">Edit</a>
<span id="answer1" style="display: none;">
<textarea rows="10" cols="115"></textarea>
</span>

<span id="text1">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</span>
</td>

스 니펫 확장

답변

이 코드를 사용하여 요소를 표시하거나 숨길 수도 있습니다.

document.getElementById(id).style.visibility = "hidden";
document.getElementById(id).style.visibility = "visible";

참고 : display : none과 달리 visible : hidden을 사용할 때 style.visibility와 차이점 style.display은 태그는 표시되지 않지만 페이지에 공간이 할당 된 것입니다. 태그는 렌더링되며 페이지에는 표시되지 않습니다.

차이점을 보려면 이 링크 를 참조하십시오.

답변

JQuery 옵션 을 제안하고 싶습니다 .

$("#item").toggle();
$("#item").hide();
$("#item").show();

예를 들면 다음과 같습니다.

$(document).ready(function(){
   $("#item").click(function(event){
     //Your actions here
   });
 });

답변

나는 다른 사람들이 제안한대로 요소를 숨기라고 제안합니다.

document.getElementById(id).style.display = 'none';

그러나 요소를 표시하려면 display = ‘block’대신이를 제안합니다.

document.getElementById(id).style.display = '';

그 이유는 display = ‘block’을 사용하면 작업중 인 페이지의 IE (11) 및 Chrome (버전 43.0.2357.130 m) 모두에서 표시되는 요소 옆에 추가 여백 / 공백이 발생하기 때문입니다.

Chrome에서 페이지를 처음로드하면 스타일 속성이없는 요소가 DOM 관리자에 다음과 같이 나타납니다.

element.style {
}

표준 JavaScript를 사용하여 숨기면 예상대로 다음과 같이됩니다.

element.style {
  display: none;
}

display = ‘block’을 사용하여 다시 표시하면 다음과 같이 변경됩니다.

element.style {
  display: block;
}

원래와 동일하지 않습니다. 이것은 대부분의 경우에 큰 차이를 만들 수 없었습니다. 그러나 어떤 경우에는 이상을 유발합니다.

display = ”을 사용하면 DOM 관리자에서 원래 상태로 복원되므로 더 나은 접근 방식처럼 보입니다.

답변

요소의 숨겨진 속성을 사용할 수 있습니다.

document.getElementById("test").hidden=true;
document.getElementById("test").hidden=false

답변

행동에 대한 JS와 시각적 사탕에 대한 CSS를 가능한 많이 생각해야합니다. HTML을 약간 변경하면 :

<td class="post">
    <a class="p-edit-btn" href="#" onclick="showStuff(this.parentNode);return false;">Edit</a>
    <span id="answer1" class="post-answer">
       <textarea rows="10" cols="115"></textarea>
    </span>
    <span class="post-text" id="text1">Lorem ipsum ... </span>
</td>

CSS 규칙을 사용하여 한보기에서 다른보기로 전환 할 수 있습니다.

td.post-editing > a.post-edit-btn,
td.post-editing > span.post-text,
td.post > span.post-answer
{
    display : none;
}

그리고 두 클래스 사이를 전환하는 JS 코드

<script type="text/javascript">
function showStuff(aPostTd) {
    aPostTd.className="post-editing";
}
</script>

답변

이 질문에 대해 여러 차례 답변을했지만 향후 사용자를 위해보다 완전하고 확실한 답변을 추가 할 것이라고 생각했습니다. 주요 대답은 문제를 해결하지만 물건을 표시하거나 숨기는 다양한 방법 중 일부를 알고 이해하는 것이 좋습니다.

css ()를 사용하여 표시 변경

이것이 내가 다른 방법을 찾을 때까지 내가했던 방식입니다.

자바 스크립트 :

$("#element_to_hide").css("display", "none");  // To hide
$("#element_to_hide").css("display", "");  // To unhide

장점 :

숨기고 숨기기를 해제합니다. 그게 다야.

단점 :

다른 것에 “display”속성을 사용하는 경우 숨기 전에 값을 하드 코딩해야합니다. 따라서 “인라인”이있는 $("#element_to_hid").css("display", "inline");경우 기본적으로 “차단”또는 강제로 적용되는 다른 항목으로 돌아갑니다.
오타 자체를 빌려줍니다.

예 : https://jsfiddle.net/4chd6e5r/1/

addClass () / removeClass ()를 사용하여 표시 변경

이 예제를 설정하는 동안 실제로이 방법에 매우 결함이있는 몇 가지 결함이 발생했습니다.

CSS / 자바 스크립트 :

.hidden {display:none}
$("#element_to_hide").addClass("hidden");  // To hide
$("#element_to_hide").removeClass("hidden");  // To unhide

장점 :

때때로 숨 깁니다. 예제에서 p1을 참조하십시오.
숨기기를 해제하면 이전 표시 값을 사용하여 다시 돌아옵니다. 예제에서 p1을 참조하십시오.
모든 숨겨진 개체를 가져 오려면해야합니다 $(".hidden").

단점 :

표시 값이 html에 직접 설정된 경우 숨기지 않습니다. 예제에서 p2를 참조하십시오.
디스플레이가 css ()를 사용하여 자바 스크립트로 설정된 경우 숨기지 않습니다. 예제에서 p3을 참조하십시오.
CSS 속성을 정의해야하므로 코드가 약간 더 많습니다.

예 : https://jsfiddle.net/476oha8t/8/

toggle ()을 사용하여 표시 변경

자바 스크립트 :

$("element_to_hide").toggle();  // To hide and to unhide

장점 :

항상 작동합니다.
전환 이전의 상태에 대해 걱정할 필요가 없습니다. 이것에 대한 명백한 사용은 토글 버튼입니다.
짧고 간단합니다.

단점 :

직접 관련이없는 작업을 수행하기 위해 전환중인 상태를 알아야하는 경우 상태를 확인하려면 더 많은 코드 (if 문)를 추가해야합니다.
이전의 단점과 비슷하게 숨길 목적으로 toggle ()이 포함 된 명령 집합을 실행하려고하지만 숨겨져 있는지 알 수없는 경우 검사 (if 문)를 추가해야합니다. 먼저 찾아서 이미 숨겨져 있다면 건너 뛰십시오. 예제의 p1을 참조하십시오.
앞의 두 가지 단점과 관련하여 구체적으로 숨기거나 구체적으로 표시하는 것에 대해 toggle ()을 사용하면 코드를 읽는 다른 사람이 전환 방법을 모르기 때문에 혼동 될 수 있습니다.

예 : https://jsfiddle.net/cxcawkyk/1/

hide () / show ()를 사용하여 표시 변경

자바 스크립트 :

$("#element_to_hide").hide();  // To hide
$("#element_to_hide").show();  // To show

장점 :

항상 작동합니다.
숨기기를 해제하면 이전 표시 값 사용으로 돌아갑니다.
당신은 항상 어떤 상태로 바꾸고 있는지 알 것입니다.
1. 상태가 중요한 경우 상태를 변경하기 전에 가시성을 확인하기 위해 if 문을 추가 할 필요가 없습니다.
2. 상태가 중요한 경우 전환하려는 상태에 대한 코드를 읽는 다른 사람들을 혼동하지 않습니다.
직관적입니다.

단점 :

토글을 모방하려면 먼저 상태를 확인한 다음 다른 상태로 전환해야합니다. 대신에 toggle ()을 사용하십시오. 예제의 p2를 참조하십시오.

예 : https://jsfiddle.net/k0ukhmfL/

전반적으로 토글이 필요하지 않으면 hide () / show ()가 가장 좋습니다. 이 정보가 도움이 되었기를 바랍니다.