如何将javascript函数转换为jquery_Javascript_Jquery

如何将javascript函数转换为jquery

javascript jquery

如何将javascript函数转换为jquery,javascript,jquery,Javascript,Jquery,我有一个javascript函数。在onChange中显示/隐藏哪个。我想在jquery中转换它，如何做 Javascript函数 function assocWindowOnLoad() { var option=document.getElementsByName("select_id"); document.getElementById('conent1').style.display='none'; document

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

Javascript函数

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>


挑选
第一选项
第二种选择
一些内容
一些内容
一些内容

使用jquery的

隐藏（）和显示（）方法
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();
        }
    }
}

你可以试试这样的
$(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
这就是您需要的
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();
    });
})

. 只需使用自己的函数扩展jquery插件。

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

$（“选择#myselectid”）.change（函数（）{
var str=“”；
var值=$（this.val（）；
如果（值=‘是’）{
$（'conent1'）.hide（）；
$（'conent2'）.show（）；
}
否则{
$（'conent1'）.show（）；
$（'conent2'）.hide（）；
}
});
谢谢你的代码，我的目标是不要使用像onChange这样的js函数。一切都必须由jquery控制。