How would I convert this jquery code into to standard javascript?
Since my cell phone apparently doesn't support JQuery, but does run the simple Javascript tests I have done, how can I convert the following JQuery code into standard Javascript?
All I need this to do is have basic click-to-hide / click-to-show functionality.
<!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开发者_StackOverflow中文版>
</body>
</html>
Worked!
Thanks bobince!
Another verbose answer
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;
}
live at http://www.jsfiddle.net/WTRFS/1/
I haven't got a NetFront to test this on, but, trying to keep it relatively unflashy to hopefully avoid broken browser features:
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';
};
};
I made it use the click event rather than toggling on every mouseover, which seemed a bit strange (and unlikely to work on a mouseless phone).
(Incidentally, avoid purely numeric id attribute values. It's not valid and can cause odd behaviours.)
<div id="1" class="flashcard" onclick="if (this.style.display == '') this.style.display='none'; else this.style.display = ''">
card contents
</div>
Quick and dirty :)
加载中,请稍侯......
精彩评论