developer tip

jQuery.toggle (boolean)과 같은 것이 존재합니까?

copycodes 2020. 11. 18. 09:18
반응형

jQuery.toggle (boolean)과 같은 것이 존재합니까?


다음 코드와 비슷한 것을 많이 작성합니다. 기본적으로 일부 조건에 따라 요소를 토글합니다.

다음 구성 예제에서 조건은 " agree확인란이 선택되고 name필드가 비어 있지 않은 경우"입니다.

$("button").click(function() {
  if ($("#agree").is(":checked") && $("#name").val() != "" ) {
    $("#mydiv").show();
  } else {
    $("#mydiv").hide();
  }
});

이와 같이 작동하는 일종의 jQuery 함수가 있었으면 좋겠습니다.

$("button").click(function() {
  var condition = $("#agree").is(":checked") && $("#name").val() != "" );
  $("#mydiv").toggle(condition);
});

저 밖에 이런 게 있나요? 아니면 더 적은 if-else-ish방법으로 이것을 수행하는 첫 번째 예 외에 다른 방법이 있습니까?


좋아, 그래서 나는 바보이고 질문하기 전에 RTM이 필요합니다.

jQuery.toggle ()을 사용하면 즉시 사용할 수 있습니다.

$("button").click(function() {
  var condition = $("#agree").is(":checked") && $("#name").val() != "" );
  $("#mydiv").toggle(condition);
});

먼저, 당신이 정확히 무엇을하고자하는지 내가 이해하는지 살펴 보자 ... 당신은 체크 박스의 상태 (체크 여부)를보고 그 값의 상태에 따라 두 번째 div를 숨기거나 보여주고 싶다.

이 스타일을 정의하십시오.

.noDisplay {
    display:none;
}

이 JavaScript를 사용하십시오.

$("button").click(function() {
  $("#mydiv").toggleClass("noDisplay", $("#name").val() == "");
});

jQuery의 문서는 http://api.jquery.com/toggleClass/ 에서 찾을 수 있습니다.


함수를 직접 작성할 수 있습니다.

function toggleIf(element, condition) {
    if (condition) { element.show(); }
    else { element.hide(); }
}

그런 다음 다음과 같이 사용하십시오.

toggleIf($("button"), $("#agree").is(":checked") && $("#name").val() != "");

toggle()그것이 당신에게 좋지 않다면 (예를 들어 애니메이션 때문에), 다음과 같이 작은 jQuery 플러그인을 작성할 수 있습니다.

$.fn.toggleIf = function(showOrHide) {
  return this.each(function() {
    if (showOrHide) {
      return $(this).show();
    } else {
      return $(this).hide();
    }
  });
};

다음과 같이 사용하십시오.

$(element).toggleIf(condition);

참고 URL : https://stackoverflow.com/questions/2388664/does-something-like-jquery-toggleboolean-exist

반응형