将JavaScript函数转换为jQuery
[英]Turning a JavaScript function into jQuery
问题描述
I want to turn the JavaScript in this example into jQuery. 
我想将本例中的JavaScript转换为jQuery。
Basically I've jerry-rigged two scripts together. 基本上，我将两个脚本拼凑在一起。 One is jQuery; 一个是jQuery；另一个是jQuery。 creates the "active" function. 创建“活动”功能。 But the hide/display layer function is in Javascript, and there's too much code for my liking, I'm thinking it must be possible to cut it down into something simple and effective with jQuery. 但是hide / display层函数是用Javascript编写的，并且我喜欢的代码太多，我认为使用jQuery可以将其简化为简单有效的代码。
FYI, I just started out with Javascript and jQuery. 仅供参考，我刚开始使用Javascript和jQuery。
Help? 救命？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JSMenu</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="JavaScript">
function HideLayer(d) { document.getElementById(d).style.display = "none"; }
function DisplayLayer(d) { document.getElementById(d).style.display = "block"; };
$(function() {
$('div.menuitem').click(function() {
var $this = $(this);
$('.active').removeClass('active');
$this.addClass('active');
})
});
</script>
<style>
#menuholder {width:100px; float:left; border-bottom:solid thin #000;}
.menuitem {border-top:solid thin #000; border-left:solid thin #000; border-right:solid thin #000;}
.menuitem:hover {cursor:pointer; color:#555}
.active {font-weight:bold; color:#000}
.active:hover {color:#000}
#layerholder {float:left; margin-left:20px; width:50px; height:50px; border:solid thin;}
.layer {padding-left:3px; font-size:36px; display:none;}
</style>
</head>
<body>
<div id="menuholder">
<div onClick="DisplayLayer('firstLayer');HideLayer('secondLayer');HideLayer('thirdLayer');HideLayer('fourthLayer')" class="menuitem">Item 1</div>
<div onClick="HideLayer('firstLayer');HideLayer('thirdLayer');HideLayer('fourthLayer');DisplayLayer('secondLayer')" class="menuitem">Item 2</div>
<div onClick="HideLayer('firstLayer');HideLayer('secondLayer');HideLayer('fourthLayer');DisplayLayer('thirdLayer')" class="menuitem">Item 3</div>
<div onClick="HideLayer('firstLayer');HideLayer('secondLayer');HideLayer('thirdLayer');DisplayLayer('fourthLayer')" class="menuitem">Item 4</div>
</div>
<div id="layerholder">
<div class="layer" id="firstLayer">1</div>
<div class="layer" id="secondLayer">2</div>
<div class="layer" id="thirdLayer">3</div>
<div class="layer" id="fourthLayer">4</div>
</div>
<div style="clear:both;"></div>
</body>
</html>
3 个解决方案
解决方案1
3 已采纳 2011-05-22 01:18:23
You could change your HTML to: 您可以将HTML更改为：
<div id="menuholder">
<div rel="firstLayer" class="menuitem">Item 1</div>
<div rel="secondLayer" class="menuitem">Item 2</div>
...
</div>
And then use this jQuery: 然后使用这个jQuery：
$('.menuitem').click(function() {
$('.layer').hide();
$('.active').removeClass('active');
$(this).addClass('active');
$('#' + $(this).attr('rel')).show();
});
This also not 100% perfect as rel is not a valid attribute for div elements. 这也不是100％完美的，因为rel并不是div元素的有效属性。 You should consider changing the div s to a elements (and use the href attribute) which has the benefit that the browser also jumps to the linked element. 您应该考虑将div更改为a元素（并使用href属性），这样做的好处是浏览器也会跳转到链接的元素。
Update: If you decide to go with links, it would be: 更新：如果您决定使用链接，它将是：
<div id="menuholder">
<a href="#firstLayer" class="menuitem">Item 1</div>
<a href="#secondLayer" class="menuitem">Item 2</div>
...
</div>
and 和
$('.menuitem').click(function() {
$('.layer').hide();
$('.active').removeClass('active');
$(this).addClass('active');
$(this.href).show();
});
解决方案2
0 2011-05-22 01:20:24
jQuery is JavaScript. jQuery是JavaScript。 There is absolutely no reason to "convert" anything. 绝对没有理由“转换”任何东西。
And jQuery has hide and show functions built in. jQuery具有内置的隐藏和显示功能。
$('#id').hide();
And as for your onClick event.. 至于您的onClick事件。
- It should be lowercase. 它应该是小写的。
- You could just do
$('.layer').hide();$('#specificLayer').show();你可以只做$('.layer').hide();$('#specificLayer').show();.。
解决方案3
0 2011-05-22 01:21:20
The script on that page already uses jquery as shown by the <script src="http://code.jquery.com/jquery-latest.js"> at the top, and the use of the $ sign before variables after it. 该页面上的脚本已经使用了jquery，如顶部的<script src="http://code.jquery.com/jquery-latest.js"> ，并在变量之后使用$符号。 Jquery is just a set of javascript functions in a library, so you can combine them without issue. jQuery只是库中的一组javascript函数，因此您可以毫无问题地组合它们。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.