將jquery函數轉換爲純Javascript使用

這是我對這個主題的第三個問題。由於我不會進入的原因，我無法在我正在使用的網站上使用jquery。你會如何建議我將這段代碼翻譯成純Javascript：將jquery函數轉換爲純Javascript使用

<script> 
    $(document).ready(function(){ 
     $('#rule-type').change(function() { 
      var val = $(this).val(); 
      if (val == 'tid and acc') { 
       $('#tid-acc').show(); 
      } 
      else { 
       $('#tid-acc').hide(); 
      } 
     }); 
    }); 
</script> 

<select id="rule-type"> 
    <option value="" selected="selected">None</option> 
    <option value="tid">tid</option> 
    <option value="tid and acc">tid and acc</option> 
    <option value="xid">xid</option> 
</select> 
<input id="tid-acc">

在此先感謝！這裏是一個鏈接jfiddle：http://jsfiddle.net/Wx8Jf/2/

來源

2011-09-08 Spencer

window.onload = function(){ //when the window has loaded 

    //store the input in a variable 
    var input = document.getElementById('tid-acc'); 

    //when the select changes 
    document.getElementById('rule-type').onchange = function() { 
     var val = this.value; 
     if (val == 'tid and acc') { 
      input.style.display = ''; //show 
     } 
     else { 
      input.style.display = 'none'; //hide 
     } 
    }; 
}

小提琴：http://jsfiddle.net/Wx8Jf/12/

來源

2011-09-08 22:27:34 amosrivera

看起來不錯，只不過''對象是內聯元素（技術上行內嵌塊）。 – jfriend00

@ jfriend00你有一個點，我把它改爲內聯 – amosrivera

非常感謝你，我是一個完整的初學者。我如何將它包裝在document.ready中，以便我可以將它放在我的html的meta部分？ – Spencer

這將是相當艱難 - 我認爲最好的答案是要做出犧牲。

$('#tid-acc').show();

例如是動畫，所以你可能會被操縱元素的CSS顯示/隱藏的比較好。

$('#rule-type').change()

根據剛纔綁定文檔和事件處理程序的JavaScript更改事件，所以你可以看看這件事，並嘗試替換。

document.ready()也可能被window.onload有點取代。

我相信我已經給你了幾個指針 - 但我不準備簡單地爲你做這項工作。

來源

2011-09-08 22:29:19

實際上，根據jQuery文檔，沒有參數的.show（）和.hide（）只是立即顯示和隱藏而沒有動畫。 – jfriend00

好的，在這種情況下，你很可能會得到確切的結果 –

爲防止對象從內容流被刪除，我會使用visibility代替display ...

http://jsfiddle.net/Wx8Jf/13/

window.onload = function(){ 
var element = document.getElementById('tid-acc'); 
document.getElementById('rule-type').onchange = function() { 
    var val = this.value; 
    if (val == 'tid and acc') { 
     element.style.visibility = 'visible'; 
    } 
    else { 
     element.style.visibility = 'hidden'; 
    } 
}; 
}

來源

2011-09-08 22:32:11 Sparky

非常感謝，我是一個完整的初學者。我如何將它包裝在document.ready中，以便我可以將它放在我的html的meta部分？ – Spencer

'document.ready'是jQuery的一部分，所以你不能使用它。然而，當所有的圖像和其他頁面資源完全加載後，'window.onload'會被觸發，其中'document.ready'只在DOM被加載時激發得更快。因此，'window.onload'應該適合你。 – Sparky

你已經有了一些很好的答案，這裏有一些替代onload。

只要文檔已準備就緒，並且在加載事件觸發前，如果將腳本放在應用的元素之後，就可以運行該腳本。最簡單的方法是在關閉標籤標籤之前放置它。

只要元素在文檔中就添加偵聽器的另一種選擇是內聯處理程序，例如，

<script type="text/javascript"> 

// Library functions that are reused 
function showElement(id) { 
    var element = typeof id == 'string'? document.getElementById(id) : id; 
    element.style.display = ''; 
} 

function hideElement(id) { 
    var element = typeof id == 'string'? document.getElementById(id) : id; 
    element.style.display = 'none'; 
} 

// Ad hoc function for this page 
function ruleTypeChange(el, id) { 
    el.value == 'tid and acc'? showElement(id) : hideElement(id); 
} 

</script> 

<!-- inline handler --> 
<select id="rule-type" onchange="ruleTypeChange(this, 'tid-acc')"> 
    ... 
</select> 
<input id="tid-acc"> 


<!-- alternative - use a bottom script --> 
<script type="text/javascript"> 
document.getElementById('rule-type').onchange = function() { 
    ruleTypeChange(this, 'tid-acc'); 
}; 
</script>

的「底部腳本」可以是元素之後的任何地方，但通常都「的onload」功能被放置在一個腳本剛剛結束標記之前。這也提供了一個更快的加載文件的外觀，並且是一個簡單的實現方法。

關於內聯處理程序，您經常會聽到那些使用複雜選擇器查找元素的「腳本應與代碼分離」的聲明，只是在文檔結構發生更改時立即讓它們中斷。添加內聯監聽器並不比添加可能用於稍後添加監聽器的類更維護頭痛，或者維護依賴於文檔結構的選擇器。它們可以通過與用於添加類，ID或數據屬性的類似或相同的服務器邏輯添加。

無論如何，做什麼最適合你，只要記住質疑教條，並得到背後的原因爲什麼東西應該做一個特定的方式。當你明白這一點時，你可以做出自己明智的選擇。

來源

2011-09-09 00:03:14 RobG

將jquery函數轉換爲純Javascript使用

回答

相關問題