Jquery读取/更改功能的Javascript代码

Question

我一直在使用以下内容，当我将'b_down'修改为20以上时，跨度ID'pmi'从页面中删除。 但是，它取决于jquery.min.js文件（如图所示）。 问题是我还有另一个jquery.js，它允许在站点上运行许多其他基于javascript的功能，但是在该文件中，显然没有使change事件起作用的代码。 当我引用googleapis jquery.min.js文件时，我想要的更改功能有效，但随后其他功能被禁用。

我花了几个小时试图确切地找出那个googleapis jquery.min.js文件中的哪些代码使变更事件启动，因此我可以将其隔离以将变更事件添加到站点而无需禁用其他功能。连接到jquery.js文件。

我几乎到处都在寻找脚本显然需要但没有发现的“伴侣” .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

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

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

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

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

Answer 3

我为这个“显示/隐藏”问题找到了一个优雅而简单的解决方案，该解决方案不涉及任何第三方.js参考文件。 以下是工作代码，其中“ el”可以是您想要的任何东西，也可以是“ order”，例如，只要在“ var x”的另一侧具有“ zoo”，就可以使用“ function zebra（zoo）” .value”，然后在select标记内，您的onchange事件与函数名称匹配，即“ 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>

Jquery读取/更改功能的Javascript代码

问题描述

3 个解决方案

解决方案1
0 2016-07-07 00:50:02

解决方案2
0 2016-07-07 00:51:54

解决方案3
0 已采纳 2016-07-07 16:52:11

Jquery读取/更改功能的Javascript代码

问题描述

3 个解决方案

解决方案1 0 2016-07-07 00:50:02

解决方案2 0 2016-07-07 00:51:54

解决方案3 0 已采纳 2016-07-07 16:52:11

解决方案1
0 2016-07-07 00:50:02

解决方案2
0 2016-07-07 00:51:54

解决方案3
0 已采纳 2016-07-07 16:52:11