将 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 更改事件，因此您可以查找并尝试替换。

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”函数都在关闭之前放入单个脚本中身体标签。这也使得文档加载速度更快，并且是一种简单的实施方法。

关于内联处理程序，您经常会听到那些使用复杂选择器查找元素的人声称“脚本应该与代码分开”，但一旦文档结构发生更改，它们就会中断。添加内联侦听器并不比添加稍后可能用于添加侦听器的类或维护依赖于文档结构的选择器更麻烦。它们可以通过与用于添加类、id 或数据属性类似或相同的服务器逻辑来添加。

无论如何，做对你最有利的事情，只要记住质疑教条并找出为什么应该以特定方式完成某些事情背后的原因。当您了解这一点时，您就可以做出自己明智的选择。