Question

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

基本上我已经把两个脚本拼凑在一起了。一个是jQuery;创建“活动”功能。但是隐藏/显示层功能是用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属性），这样做的好处是浏览器也会跳转到链接元素。

DEMO

更新：如果你决定使用链接，那就是：

<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">所示，以及之后使用$ sign之前的变量。 Jquery只是库中的一组javascript函数，因此您可以毫无问题地组合它们。

将JavaScript函数转换为jQuery

3 个答案: