Question

我一直在毫无困难地使用以下内容，当我修改＆＃39; b_down＆＃39;超过20，跨度id＆＃39; pmi＆＃39;已从页面中删除。但是，它依赖于jquery.min.js文件（如图所示）。问题是我有另一个jquery.js允许在网站上运行许多其他基于javascript的功能，但在该文件中，使更改事件显然工作的代码不存在。当我引用googleapis jquery.min.js文件时，我想要的更改功能可以使用，但其他功能被禁用。

我花了几个小时试图找出其中的代码 googleapis jquery.min.js文件使更改事件触发，因此我可以将其隔离以将我的更改事件添加到站点中，而不会禁用连接到jquery.js文件的其他功能。

我几乎到处寻找伴侣＆＃39; .js代码，脚本显然需要但却一无所获。这个脚本很常见，但是我发现的每个例子都会添加googleapis jquery.min.js脚本引用（或者类似的东西），如果没有它，脚本就不会工作。

所以，我想知道javascript谓词是什么：

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

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

而不是盲目地这样做：

<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>

因为

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

与我在标题中引用的另一个.js文件冲突，

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

Answer 1

您的JQuery.js文件是什么版本的？

您所引用的所有方法都应该在那里，实现中可能只有微妙的差异。

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

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

绑定更改事件后

验证是否找到了dom元素

$(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");  
  });
});

Answer 2

为避免冲突，您可以直接从ready对象调用jQuery，它会将jQuery实例作为参数传递给ready回调：

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

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

因此，您可以在准备好的回调中使用$而不会出现任何问题。

Answer 3

我找到了一个优雅而简单的解决方案，用于显示/隐藏＆＃39;不涉及任何第三方.js参考文件的问题。以下是工作代码，其中＆＃39; el＆＃39;可以是你想要的任何东西，也可以是＆＃39; order＆＃39;，例如你可以使用＆＃39; function zebra（zoo）＆＃39;只要在＆＃39; var x＆＃39;的另一边你有＆＃39; zoo.value＆＃39;，并且在select标签内，你的onchange事件与功能名称相匹配，即＆＃39; onchange =＆＃34; zebra（this）＆＃34;＆＃39; 。

<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>

Jquery读取/更改函数的Javascript代码

3 个答案: