将JavaScript函数转换为jQuery

Question

我想将本例中的JavaScript转换为jQuery。

基本上，我将两个脚本拼凑在一起。 一个是jQuery；另一个是jQuery。 创建“活动”功能。 但是hide / display层函数是用Javascript编写的，并且我喜欢的代码太多，我认为使用jQuery可以将其简化为简单有效的代码。

仅供参考，我刚开始使用Javascript和jQuery。

救命？

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

Answer 1

您可以将HTML更改为：

<div id="menuholder">
   <div rel="firstLayer" class="menuitem">Item 1</div>
   <div rel="secondLayer" class="menuitem">Item 2</div>
   ...
</div>

然后使用这个jQuery：

$('.menuitem').click(function() {
    $('.layer').hide();
    $('.active').removeClass('active');
    $(this).addClass('active');
    $('#' + $(this).attr('rel')).show();
});

这也不是100％完美的，因为rel并不是div元素的有效属性。 您应该考虑将div更改为a元素（并使用href属性），这样做的好处是浏览器也会跳转到链接的元素。

演示

更新：如果您决定使用链接，它将是：

<div id="menuholder">
   <a href="#firstLayer" class="menuitem">Item 1</div>
   <a href="#secondLayer" class="menuitem">Item 2</div>
   ...
</div>

和

$('.menuitem').click(function() {
    $('.layer').hide();
    $('.active').removeClass('active');
    $(this).addClass('active');
    $(this.href).show();
});

Answer 2

jQuery是JavaScript。 绝对没有理由“转换”任何东西。

jQuery具有内置的隐藏和显示功能。

$('#id').hide();

至于您的onClick事件。

它应该是小写的。
你可以只做$('.layer').hide();$('#specificLayer').show(); 。

Answer 3

该页面上的脚本已经使用了jquery，如顶部的<script src="http://code.jquery.com/jquery-latest.js"> ，并在变量之后使用$符号。 jQuery只是库中的一组javascript函数，因此您可以毫无问题地组合它们。

将JavaScript函数转换为jQuery

问题描述

3 个解决方案

解决方案1
3 已采纳 2011-05-22 01:18:23

解决方案2
0 2011-05-22 01:20:24

解决方案3
0 2011-05-22 01:21:20

将JavaScript函数转换为jQuery

问题描述

3 个解决方案

解决方案1 3 已采纳 2011-05-22 01:18:23

解决方案2 0 2011-05-22 01:20:24

解决方案3 0 2011-05-22 01:21:20

解决方案1
3 已采纳 2011-05-22 01:18:23

解决方案2
0 2011-05-22 01:20:24

解决方案3
0 2011-05-22 01:21:20