將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