将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使用

回答

相关问题