將Jquery函數轉換為純Javascript

Question

這是我關於這個問題的第三個問題。 由於我不願討論的原因，我無法在正在工作的網站上使用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/

Answer 1

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/

Answer 2

這將非常艱難-我認為最好的答案是做出犧牲。

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

例如是動畫，因此您最好對元素上的CSS進行顯示/隱藏。

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

根據文檔，只是將綁定和事件處理程序綁定到javascript change事件，因此您可以查找並嘗試替換。

document.ready()也可能被window.onload代替。

我相信我在這里給了您一些建議-但我不准備簡單地為您完成工作。

Answer 3

為了防止對象從內容流中刪除，我將使用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';
   }
 };
}

Answer 4

您已經找到了很好的答案，這是onload的一些替代方法。

如果將腳本放在要應用的元素之后，則可以在文檔准備好后以及加載事件觸發之前運行腳本。 最簡單的方法是將其放在結束body標簽之前。

元素在文檔中后立即添加偵聽器的另一個選項是內聯處理程序，例如

<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”功能都放在單個腳本中，緊接在結束body標簽之前。 這也使文檔加載速度更快，並且是實現的簡單方法。

對於內聯處理程序，經常會聽到使用復雜選擇器查找元素的人聲稱“腳本應與代碼分開”的說法，只是在文檔結構改變后才使它們中斷。 添加內聯偵聽器與添加可能稍后用於添加偵聽器或維護依賴於文檔結構的選擇器的類相比，不再是維護上的麻煩。 可以通過與用於添加類，ID或數據屬性的相似或相同的服務器邏輯來添加它們。

無論如何，做對自己最有利的事情，只是記得要對教條提出質疑，並弄清楚為什么應該以某種特定方式來做某件事。 了解了這一點后，您就可以做出明智的選擇。