既然my cell phone apparently doesn't support JQuery，但确实运行了我已经做过的简单的Javascript测试，如何将下面的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>

工作！

谢谢bobince！

alt text http://www.deviantsart.com/upload/o61pba.jpg

来源

2010-07-06 Edward Tanguay

我没有得到一个NF浏览器对测试，但是，试图保持它相对unflashy，希望能够避免破浏览器功能：

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，这似乎有点奇怪（并且不太可能工作o无鼠标手机）。

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

来源

2010-07-07 00:03:17 bobince

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

快速和肮脏:)

来源

2010-07-06 23:53:15 Nick

也，你可以创建一个功能（不知道你的手机是否会支持这种功能...如： function showhideme（element）{ element.style.display = element.style.display = =''？ '没有' ： ''; } ...

– Nick 2010-07-06 23:56:15

另一个详细的答案

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/

来源

2010-07-07 00:10:05

我将如何将此jQuery代码转换为标准的JavaScript？

工作！

回答

相关问题