jquery 커스텀 이벤트는 .show와 .hide에 붙어 있습니다.

Question

저는 우리 UI 요구 사항 중 일부를 만족시키기 위해 jquery의 가능성을 모색 중이며 흥미로운 행동을 경험하고 있습니다. 저는 jQuery에 익숙하지 않습니다. 그리고 show & 숨기기 기능에 연결되는 기본 pub-sub 유형의 패턴을 구현하려고합니다.

표면에서 완벽하게 단순하게 보이는 맞춤 이벤트 메커니즘에도 불구하고 예상대로 작동하지 않습니다. 구문상의 실수를 볼 수 없으므로 이러한 사용자 지정 이벤트의 작동 방식을 오해해야합니다.

이 코드를 실행할 때 은이되어야한다고 생각합니다.

처음에는 (doc.Ready 이후) question2 요소를 숨겨야합니다.

'버몬트'라디오 버튼을 클릭하면 질문 2가 표시되고 'question2가 표시되었습니다'라는 알림 상자가 표시됩니다.

다른 라디오 버튼을 클릭하면 질문 2가 숨겨지고 그 다음에 질문 2가 숨겨 짐을 나타내는 경고 상자가 표시됩니다.

실제로 발생하는 것은 질문 2를 표시 할 때 수많은 경고 상자가 표시되고 숨길 때는 표시되지 않습니다. 이유를 이해하는 데 도움주세요. 보고에 대한

<div id="content"> 
    <div id="radioButtonASD" class="example"> 
     <h2>radio button visibility trigger</h2> 
     <div data-uniquename="question1" class="question"> 
      <label for="question1"> 
       Question 1) (select Vermont to show Question2) 
      </label> 
      <br /> 
      <label data-uniquename="question1.Maine"> 
       <input name="question1" data-uniquename="question1.Maine" type="radio" value="me" />Maine</label><br /> 
      <label data-uniquename="question1.Vermont"> 
       <input name="question1" data-uniquename="question1.Vermont" type="radio" value="question1.Vermont" />Vermont</label><br /> 
      <label data-uniquename="question1.NewHampshire"> 
       <input name="question1" data-uniquename="question1.NewHampshire" type="radio" value="question1.NewHampshire" />New 
       Hampshire</label><br /> 
      <label data-uniquename="question1.Conneticut"> 
       <input name="question1" data-uniquename="question1.Conneticut" type="radio" value="question1.Conneticut" />Conneticut</label><br /> 
      <label data-uniquename="question1.Massachusetts"> 
       <input name="question1" data-uniquename="question1.Massachusetts" type="radio" value="question1.Massachusetts" />Massachusetts 
      </label> 
     </div> 
    <br /> 
     <div data-uniquename="question2" class="question"> 
      <label> 
       Question 2) 
      </label> 
      <br /> 
      <select> 
       <option data-uniquename="question2.honda" value="honda">Honda</option> 
       <option data-uniquename="question2.volvo" value="volvo">Volvo</option> 
       <option data-uniquename="question2.saab" value="saab">Saab</option> 
       <option data-uniquename="question2.mercedes" value="mercedes">Mercedes</option> 
       <option data-uniquename="question2.audi" value="audi">Audi</option> 
      </select> 
     </div> 
    </div> 
</div> 

감사 : 여기

<script type="text/javascript"> 

    function processRadioButtonASD() { 
     var isChecked = ($("input[name=question1]:checked").val() == "question1.Vermont"); 
     if (isChecked == true) { 
      $("[data-uniquename=question2]").show(250); 
     } else { 
      $("[data-uniquename=question2]").hide(250); 
     } 
    } 

    function detectVisibilityChange(uniqueName) { 
     $("[data-uniquename=" + uniqueName + "]").bind("madeVisible", function() { 
      alert($(this).attr("data-uniquename") + " was made visible"); 
     }); 
     $("[data-uniquename=" + uniqueName + "]").bind("madeHidden", function() { 
      alert($(this).attr("data-uniquename") + " was made hidden"); 
     }); 
    } 

    $(function() { 
     $.each(["show", "hide"], function() { 
      var _oldFn = $.fn[this]; 
      $.fn[this] = function() { 
       var wasVisible = $(this).is(':visible'); 
       var result = _oldFn.apply(this, arguments); 
       var isVisible = $(this).is(':visible'); 

       if ((isVisible == true) && (wasVisible == false)) { 
        $(this).triggerHandler("madeVisible"); 
       } else if ((isVisible == false) && (wasVisible == true)) { 
        $(this).triggerHandler("madeHidden"); 
       } 
       return result; 
      } 
     }); 
    }); 

    $(document).ready(function() { 
     processRadioButtonASD(); 
     detectVisibilityChange("question2"); 
     $("input[name='question1']").change(function() { processRadioButtonASD(); }); 
    }); 
</script> 

는 HTML입니다 : 여기

는 스크립트입니다.

Answer 1

나는 다른 방법을 생각해 냈습니다.

$.each(["show", "hide"], function() { 
    var effect = $.fn[this]; 
    $.fn[this] = function(duration, move, callback) { 
     // Match the arguments 
     var speed = duration; 
     var easing = callback && move || move && !jQuery.isFunction(move) && move; 
     var fn = callback || !callback && move || jQuery.isFunction(duration) && duration; 
     // Wrap the callback function 
     var wrapped = fn; 
     var wasVisible = $(this).is(':visible'); 
     fn = function(){ 
      var isVisible = $(this).is(':visible'); 
      $.proxy(wrapped, this); 
      if ((isVisible == true) && (wasVisible == false)) { 
       $(this).triggerHandler("madeVisible"); 
      } else if ((isVisible == false) && (wasVisible == true)) { 
       $(this).triggerHandler("madeHidden"); 
      } 
     }; 
     // Run the effect with the wrapped callback    
     return effect.call(this, speed, easing, fn); 
    }; 
}); 

아이디어는 callback 기능을 사용합니다. 여기에서 코드를 리팩토링하고 정리할 수 있습니다.

a working example을 살펴보십시오.