2

おそらく初心者のjqueryの質問...これが私の問題です：

div要素のリストを動的に作成しました。それぞれに固有のコンテンツ、ID、および隅にあるトグルアイコンがあります。トグルアイコンを押すと、次のようになります。divのコンテンツを展開/非表示にし、アイコンを変更します。

私の最初の考えは、2つのカスタムjquery関数を次のように呼び出すことでした（番号はPHPによって動的に挿入されます）。

<div id="div152" >
  <div id="content152">some content</div>
  <a id="toggle-icon152" href="javascript:void(0);" onclick="togglemydiv(content152); changeicon(icon152)">
    <div id="icon152">someicon</div>
  </a>
</div>

現在、これは一部のブラウザで機能しますが、WindowsやフィドルのFFでは機能しないため、明らかにこの方法ではありません。どんな助けでもいただければ幸いです。

4

4 に答える 4

4

ID を js にハードコーディングしないことをお勧めします。

これをより簡単にする方法を次に示します。

html:

<div id="div152" >
  <div id="content152">some content</div>
  <a id="toggle-icon152" data-bind-action="toggle-content" href="#">
    <div id="icon152">someicon</div>
  </a>
</div>​

js:

$("a[data-bind-action='toggle-content']").click(toggleContent);

function toggleContent(){
    var a = $(this);
    var div = a.prev();
    div.toggle();
    e.preventDefault();
    return false;
}

jsfiddleでどのように機能するかを確認してください。

これは、コンテンツが a の前の要素であると想定しないバージョンですが、リンクに属性を追加して、何を切り替えるかを認識します: http://jsfiddle.net/PrmX5/4/

html5 data- 属性を追加して、どのトグル関数を js からアタッチする必要があるかを特定します。もちろん、クラスまたは他の (より高速な?) jQuery セレクターを使用して、これを別の方法で行うことができます。

@coosal が回答で述べたように、div が動的に生成される場合 (ajax またはクライアント上)、livedocument.ready にバインドする代わりに使用する必要があるため、ライブを使用するバージョンは次のとおりです: http://jsfiddle.net/PrmX5/ 5/

于 2012-09-06T17:15:52.587 に答える
3

インラインJSの代わりに外部スクリプトを使用することをお勧めします

$('#toggle-icon152').on('click', function(e){ 
   $('#content152').toggle();  // or do something else
   e.preventDefault();
}

参照http://api.jquery.com/toggle/

于 2012-09-06T17:12:37.823 に答える
2

はdivs動的に生成されるため、イベントをトリガーするには live() 関数が必要です。. jqueryのlive()関数をチェック

jQuery("#toggle-icon152").live("click",function(){
togglemydiv("content152");
changeicon("icon152");
})
于 2012-09-06T17:17:12.567 に答える
0

togglemydiv をどこかに記述しており、id をパラメーターとして受け取ると仮定すると、'content152' を引用符で囲む必要があります。そうしないと、存在しないオブジェクトを関数に渡そうとします (おそらく通過します)。タイプ未定義として）

上で alex が提案したように、javascript を HTML タグから分離する必要があります - そのベストプラクティス..

于 2012-09-06T17:18:57.733 に答える