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

我一直在使用以下，没有任何问题，当我修改'b_down'高于20时，跨度id'pmi'将从页面中删除。但是，它依赖于jquery.min.js文件（如图所示）。问题是我有另一个jquery.js，允许在网站上运行许多其他基于JavaScript的功能，但在该文件中，使更改事件显然不起作用的代码不存在。当我参考googleapis jquery.min.js文件时，我想要的更改功能可以工作，但其他功能则被禁用。Jquery的Javascript代码读取/更改功能

我花了几个小时试图弄清楚在googleapis jquery.min.js文件中的代码是什么使得更改事件触发，所以我可以将它隔离出来以便将我的更改事件添加到网站w/o禁用连接到jquery.js文件的其他功能。

我几乎到处寻找脚本显然需要的'companion'.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>

来源

2016-07-07 user6096423

请提供** .js **发生冲突。 – Anson

对于初学者，您应该避免在页面中使用jQuery的两个版本。你为什么这样做？如果你打算这么做的话，那么有一个涉及到允许两个单独版本的jQuery同时共存的过程（尽管你的第一个业务命令应该是避免使用两个版本）。 – jfriend00

不幸的是，我不是一个JavaScript专家，并且网站上的许多功能与jquery.js文件一起工作得非常好，当用googleapis js文件替换它们时，它们不会，但是我喜欢的功能不会工作w/o两个文件。我全部都是为了凝聚他们。如果我可以准确地分离出那些能够激发这些小代码的googleapis js文件，我会删除其余部分，并且我怀疑与其他文件会有冲突。 – user6096423

我发现了一个不涉及任何第三方.js参考文件的“显示/隐藏”问题的优雅和简单的解决方案。以下是工作代码，其中'el'可以是任何你想要的，也可以是'order'，例如你可以使用'function zebra（zoo）'，只要在'var x'的另一边你有'动物园.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>

来源

2016-07-07 16:52:11 user6096423

你的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"); 
    }); 
});

来源

2016-07-07 00:50:02 Steve

版本：jQuery v2.1.3 | （c）2005年，2014年jQuery Foundation，Inc. | jquery.org/license – user6096423

你的脚本应该没有jquery.min.js。我会使用fiddler或浏览器工具网络标签来确定是否正在下载第三个jQuery库。 – Steve

为了避免冲突，你可以直接从jQuery对象调用ready，它会在jQuery实例传递给ready回调的后参数：

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

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

所以，你可以使用$准备调用内部返回没有任何问题。

来源

2016-07-07 00:51:54

FWIW，我试过了，严格按照显示，' \t \t \t \t \t \t <选择ID = “b_down” 名称= “b_down”> \t <选项值= “”>选择 \t <选项值= “1”> 1<选项值= “2”> 2<选项值= “30”> 30 \t \t \t <跨度ID = “PMI”> \t \t测试 \t \t \t'并且没有googleapis文件引用，没有什么 – user6096423

必须包括jQuery库！ –

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

回答

相关问题