【问题标题】：How would I convert this jquery code into to standard javascript?如何将此 jquery 代码转换为标准 javascript？
【发布时间】：2019-08-01 13:08:20
【问题描述】：

由于my cell phone apparently doesn't support JQuery，但确实运行了我做过的简单的Javascript测试，我怎样才能将下面的JQuery代码转换成标准的Javascript？

我需要做的就是拥有基本的点击隐藏/点击显示功能。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script type="text/javascript" src="javascript/jquery-1.4.2.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("div > div.question").mouseover(function() {
                    if($(this).next().is(':hidden')) {
                        $(this).next().show();
                    } else {
                        $(this).next().hide();
                    }
                });    
            });        
        </script>
        <style>
            div.flashcard {
                margin: 0 10px 10px 0;
            }
            div.flashcard div.question {
                background-color:#ddd;
                width: 400px;        
                padding: 5px;    
                cursor: hand;    
                cursor: pointer;
            }
            div.flashcard div.answer {
                background-color:#eee;
                width: 400px;
                padding: 5px;    
                display: none;        
            }
        </style>
    </head>
<body>
    <div id="1" class="flashcard">
    <div class="question">Who was Wagner?</div>
    <div class="answer">German composer, conductor, theatre director and essayist.</div>
    </div>

    <div id="2" class="flashcard">
    <div class="question">Who was Thalberg?</div>
    <div class="answer">a composer and one of the most distinguished virtuoso pianists of the 19th century.</div>
    </div>
</body>
</html>

工作！

谢谢博宾斯！

_{（来源：deviantsart.com）}

【问题讨论】：

标签： javascript jquery

【解决方案1】：

另一个冗长的答案

window.onload = function(){
  var questions = getElementsByClass('question',document,'div');

  for (var idx=0;idx<questions.length;idx++)
      questions[idx].onclick = function(){
              var answer = getElementsByClass('answer',this.parentNode,'div')[0];

              if (answer.style.display == '')
                  answer.style.display='block'
              else
                  answer.style.display = '';
          }
}

function getElementsByClass(searchClass,node,tag) {
    var classElements = new Array();
    if ( node == null )
        node = document;
    if ( tag == null )
        tag = '*';
    var els = node.getElementsByTagName(tag);
    var elsLen = els.length;
    var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
    for (i = 0, j = 0; i < elsLen; i++) {
        if ( pattern.test(els[i].className) ) {
            classElements[j] = els[i];
            j++;
        }
    }
    return classElements;
}

住在http://www.jsfiddle.net/WTRFS/1/

【讨论】：

【解决方案2】：

我还没有一个 NetFront 来测试这个，但是，尽量保持它相对不华丽，希望避免破坏浏览器功能：

window.onload= function() {
    var divs= document.getElementsByTagName('div');
    for (var i= divs.length; i-->0;)
        if (divs[i].className==='question')
            Toggler(divs[i]);
};

function Toggler(div) {
    var state= false; // assume initially hidden
    var toggled= div.nextSibling;
    while (toggled.nodeType!==1)
        toggled= toggled.nextSibling; // find next element sibling

    div.onclick= function() {
        state= !state;
        toggled.style.display= state? 'block' : 'none';
    };
};

我让它使用click 事件，而不是在每个mouseover 上切换，这看起来有点奇怪（并且不太可能在无鼠标手机上工作）。

（顺便说一句，避免纯数字 id 属性值。它是无效的，可能会导致奇怪的行为。）

【讨论】：

【解决方案3】：

<div id="1" class="flashcard" onclick="if (this.style.display == '') this.style.display='none'; else this.style.display = ''">
card contents
</div>

又快又脏 :)

【讨论】：

另外，您可以创建一个函数（不确定您的手机是否支持该函数... smth like: function showhideme(element) { element.style.display = element.style.display == ' ' ? 'none' : ''; } ...