既然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？

工作！

回答

相關問題