С my cell phone apparently doesn't support JQuery, но выполняет простые тесты Javascript, которые я сделал, Как преобразовать следующий код JQuery в стандартный Javascript?Как бы преобразовать этот код jquery в стандартный javascript?

Все, что мне нужно, это сделать базовым click to hide/click-to-show Функциональность.

<!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>

Работал!

Thanks bobince!

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

источник

2010-07-06 Edward Tanguay

Я не получил NetFront, чтобы проверить это, но, пытаясь сохранить его относительно 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 n mouseless phone).

(Кстати, избегать чисто числовых 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

также, вы можете создать (не уверен, поддерживает ли ваш телефон это ... smth like: Функция showhideme (элемент) { element.style.display = element.style.display = знак равно 'никто' : ''; } ...

– Nick

Другой многословен ответ

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?

Работал!

ответ

Смежные вопросы