将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或数据属性的相似或相同的服务器逻辑来添加它们。

无论如何，做对自己最有利的事情，只是记得要对教条提出质疑，并弄清楚为什么应该以某种特定方式来做某件事。 了解了这一点后，您就可以做出明智的选择。