将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">

提前谢谢！以下是JFIDLE的链接：

---

小提琴手：

这将是相当困难的——我认为最好的答案是做出牺牲

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

例如，是一个动画，因此您可能会更好地操纵元素上的CSS以显示/隐藏

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

根据文档的说明，只需将事件处理程序绑定到javascript更改事件，因此您可以查找该事件并尝试替换

document.ready也可能被window.onload替换

---

我相信我已经给了你一些建议，但我不准备简单地为你做这项工作。

为了防止对象从内容流中删除，我会使用可见性而不是显示

---

您已经得到了一些很好的答案，这里有一些替代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函数都放在一个脚本中，就在结束body标记之前。这还提供了更快加载文档的外观，是一种简单的实现方法

关于内联处理程序，您经常会听到这样的说法：脚本应该与使用复杂选择器查找元素的代码分开，而在文档结构更改后，这些元素会立即中断。添加内联侦听器与添加一个类（该类可能用于以后添加侦听器或维护依赖于文档结构的选择器）相比，并不是一个维护难题。它们可以通过与添加类、id或数据属性类似或相同的服务器逻辑添加

---

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

看起来不错，只是一个对象是一个内联元素，从技术上讲是内联块。非常感谢你，我是一个完全的初学者。如何将其包装到document.ready中，以便将其放入html的元部分？而且，window.onload可能比$document.ready晚得多，因为window.onload等待页面中的所有图像加载，而$document.ready则没有。jQuery的$document.ready后面有重要的逻辑，因此不能用几行代码来模拟它。@Spencer欢迎，在这种情况下，window.load相当于document.ready。照原样复制就可以了。@jfriend00你说得对，你很清楚情况。非常感谢你，我是一个完全的初学者。如何将其包装在document.ready中，以便将其放入html的元部分？document.ready是jQuery的一部分，因此您不能使用它。但是，window.onload在所有图像和其他页面资产完全加载后触发，而document.ready在仅加载DOM时会更快地触发。因此，window.onload应该适合您的位置。实际上，根据jQuery文档，.show和.hide不带参数，只需立即显示和隐藏，不带动画。好的，在这种情况下，您很可能能够获得准确的结果

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';
   }
 };
}

<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>