JavaScript関数をjQueryに変換する

JavaScriptをthisの例のJavaScriptをjQueryに変えたいとします。JavaScript関数をjQueryに変換する

基本的には、私はジェリーリグジッと2つのスクリプトを一緒にしました。 1つは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>

出典

2011-05-22 Eilenna

jQueryはJavaScriptフレームワークであり、別の言語ではありません。 –

はい、わかっています。それは事です。 Javascript関数を "フレームワーク"したい）=== jQuery関数と一緒にそれをモーフィングする。好ましくは、HTMLからスクリプトを削除する。今すぐ "onClick"の後に非常に多くのコードがあります。 – Eilenna

jQueryは別のAPIです。明らかに、OPはネイティブDOM API呼び出しをjQueryに変換しようとしています。 – user113716

あなたがあなたの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(); 
});

relとして完璧これも100％ではないが、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(); 
});

出典

2011-05-22 01:18:23

ユニークであれば、レイヤーごとにIDを使用するだけではどうですか？ –

@GioBorje：レイヤーには既にIDがあります... –

ああ、私はちょうど2つのコンテナがあることに気付きました。 –

jQueryのJavaScriptのです。何かを "変換"する絶対的理由はありません。

とjQueryを内蔵機能を非表示と表示しています。

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

そして、あなたのonClickイベント用として..

それは小文字でなければなりません。
$('.layer').hide();$('#specificLayer').show();とすればいいです。

出典

2011-05-22 01:20:24 Kayla

このページのスクリプトでは、すでにjqueryが使用されています（先頭には<script src="http://code.jquery.com/jquery-latest.js">）。その後に変数の前に$記号が使用されています。 Jqueryはライブラリ内の単なるJavaScript関数のセットなので、問題なく組み合わせることができます。

出典

2011-05-22 01:21:20 Truk

'$'は何でもかまいませんが、jQueryが使われているわけではありません。このスクリプトを含むことは、jQueryが使用されていることを示す強力な指標です**しかし、Prototypeなどの別のフレームワークによって上書きされる可能性があります。 –

ちょうどjqueryがその使用を意味するわけではありません。 jquery.noconflictを付けずに$ afterwardを使用すると – Truk

JavaScript関数をjQueryに変換する

答えて

関連する問題