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”函数都放在关闭body标记之前的单个脚本中。这也提供了更快的加载文档的外观，并且是一种简单的实现方法。

对于内联处理程序，您经常会听到“脚本应该与代码分离”的声明，以及使用复杂选择器查找元素的声明，只有在文档结构发生更改时才会中断它们。添加内联侦听器不再是一个维护问题，而是添加一个可能用于以后添加侦听器的类，或者维护依赖于文档结构的选择器。它们可以通过类似或相同的服务器逻辑添加，如用于添加类，id或数据属性。

无论如何，做最适合你的事情，只记得质疑教条，并找出背后的理由为什么应该以某种方式完成某些事情。当您了解这一点时，您可以做出明智的选择。

将Jquery函数转换为纯Javascript

4 个答案: