简体   繁体   中英

Javascript Code for Jquery Read/Change function

I have been using the following with no trouble, where when I revise 'b_down' above 20, the span id 'pmi' is removed from the page. However, it is dependent on a jquery.min.js file (shown). The problem is I have another jquery.js that allows numerous other javascript based features to run on the site, but within that file the code that makes the change event work apparently is not there. When I reference the googleapis jquery.min.js file, the change feature I want works, but then other features are disabled.

I have spent several hours trying to figure out exactly what bit of code in that googleapis jquery.min.js file makes the change event fire, so I can isolate it to get my change event added to the site w/o disabling the other features connected to the jquery.js file.

I have pretty much looked everywhere for the 'companion' .js code that the script apparently needs but have found nothing. The script is common, but every example I have found always adds the googleapis jquery.min.js script reference (or something similar) as without it, the script wont work.

So, I was wondering what is the javascript predicate to:

 <script>
        $(document).ready(function (){
            $("#b_down").change(function() {

                if ($(this).val() < 20 ) {
                    $("#pmi").show();
                }else{
                    $("#pmi").hide();
                } 
            });
        });
  </script>

Instead of blindly going at it like this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
        $(document).ready(function (){
            $("#b_down").change(function() {
                // foo is the id of the other select box 
                if ($(this).val() < 20 ) {
                    $("#pmi").show();
                }else{
                    $("#pmi").hide();
                } 
            });
        });
    </script>

because

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

conflicts with another .js file I reference in my header,

 <script src="jquery.js" type="text/javascript"></script>

what version is your JQuery.js file?

All the methods your referencing should be in there, there may just be subtle differences in implementation.

$(function(){ .. });  -- is equivalent to $(document).ready(function() { .. });

$("#id").change(fn)  -- is equivalent to $("#id").on("change", fn)

after binding the change event verify that the dom element was found

$(function (){
  $("#b_down").change(function() {
     var value = parseInt(this.value);
     alert("inside change event: " + value);
     $("#pmi").toggle(value < 20);
  }); 

  if ($("#b_down").length == 0)
     alert("#b_down dom element is not found");  
  });
});

To avoid conflicts you can call ready directly from jQuery object and it will pass the jQuery instance to the ready callback as a parameter:

jQuery(document).ready(function ($){
   $("#b_down").change(function() {

      if ($(this).val() < 20 ) {
         $("#pmi").show();
      }else{
         $("#pmi").hide();
      } 
   });
});

So you can use $ inside the ready callback without any problem.

I found an elegant and simple solution for this 'show/hide' issue that did not involve any third party .js reference files. Below is working code, where 'el' can be anything you want, as well as 'order', for example you could use 'function zebra(zoo)' as long as on the other side of 'var x' you have 'zoo.value', and inside the select tag, your onchange event matches the function name, ie 'onchange="zebra(this)"'.

<html>
<head>
<script>
function order(el) {
var x = el.value;

if (x >= 20) {
document.getElementById('pmi').style.display = 'none';
} else if (x < 20) {
document.getElementById('pmi').style.display = 'block';
} 

}
</script>
</head>
<body>
<select name="b_down" id="b_down" onchange="order(this)">
<option value="1">1</option>
<option value="2">2</option>
<option value="30">30</option>
</select>
<p>
<span id="pmi">
Span Content
</span>
</p>
</body>
</html>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM