如何将javascript函数转换为jquery答案

【问题标题】：how to convert javascript function to jquery如何将javascript函数转换为jquery
【发布时间】：2011-06-27 06:39:41
【问题描述】：

我有一个 javascript 函数。在 onChange 中显示/隐藏哪个。我想在jquery中转换，怎么做。

Javacript 函数

function assocWindowOnLoad()
      {
          var option=document.getElementsByName("select_id");
          document.getElementById('conent1').style.display='none';
          document.getElementById('conent2').style.display='none';
      }

function assocWindowOnChange(val)
    {
          //if user select option Select from drop down
          if(val=='')
          {   
              //alert("Please Select option from the dropdown");
          assocWindowOnLoad();
          }
          else
          {
              //Show or hide piece of code depending on user input
              document.getElementById('conent1').style.display=(val=='no')?'none':'block';
              document.getElementById('conent2').style.display=(val=='no')?'block':'none';
          }
      }

HTML 代码

<body onLoad="assocWindowOnLoad();">
<select name="select_id" id="select_id" onChange="assocWindowOnChange(this.value);" >
           <option value='' selected="selected">Select</option>
           <option value='no'>1st Option</option>
           <option value='yes'>Second Option</option>
</select>

<div id="conent1" class="hide">

<p>some content</p>

</div>

<div id="conent1" class="hide">

<p>some content</p>

</div>

<div id="conent2" class="hide">

<p>some content</p>

</div>
</body>

【问题讨论】：

标签： javascript jquery

【解决方案1】：

使用jquery的hide() and show()方法..

function assocWindowOnLoad()       {
    $('#conent1').hide();
    $('#conent2').hide();
}

function assocWindowOnChange(val){
    //if user select option Select from drop down
    if(val==''){
        //alert("Please Select option from the dropdown");
        assocWindowOnLoad();
    }else{
        //Show or hide piece of code depending on user input
        if(val=='no'){
            $('#conent1').hide();
            $('#conent2').show();
        }
        else{
            $('#conent1').show();
            $('#conent2').hide();
        }
    }
}

【讨论】：

【解决方案2】：

你可以试试这样的

$(document).ready(function(){  

    // To hide the element
    $("YOUR_SELCTOR").click(function()
    {
       $("ELEMENT_TO_BE_HIDE").hide("slow");
    });

    // To show the element
    $("YOUR_SELCTOR").click(function()
    {
       $("ELEMENT_TO_BE_HIDE").show("slow");
    });


});

您可以使用toggle() 代替hide 和show。

【讨论】：

【解决方案3】：

<script>
 $("select #myselectid").change(function () {
   var str = "";
   var value = $(this).val();
   if (value == 'yes') {
     $('conent1').hide();
     $('conent2').show();
   }
   else {
     $('conent1').show();
     $('conent2').hide();
   }
 });

【讨论】：

【解决方案4】：

toggleDisplay = function() {
  if($('#select_id').val()=='no'){
    $('#conent1').hide();
    $('#conent2').show();
  } else {
     $('#conent1').show();
     $('#conent2').hide();
  }

}
$(document).ready(function() {
    toggleDisplay();
    $('#select_id').change(function() {
      toggleDisplay();
    });
})

【讨论】：

感谢您的代码，我的目标是不要使用任何像onChange这样的js函数。一切都必须由 jquery 控制。

【解决方案5】：

这就是你需要的 http://docs.jquery.com/index.php?title=Core/fn.extend 。只需使用您自己的函数扩展 jquery 插件即可。

【讨论】：