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代碼讀取/更改功能

回答

相關問題