0

foreachループ内にコンテンツがあります...

                    <div foreach:"data">
             <input type="image" id="hideshow" src="/Images/aud_down-arrow.gif" />    
           <div id="content"> 
         <textarea data-bind="text:valueoftext" rows='5' cols='60'></textarea>

        </div></div>
     jQuery(document).ready(function ()     {    
    jQuery('#hideshow').live('click', function (event)     {    
        jQuery('#content').toggle('show');
           });    
});

現在、テキスト ボックスは作成されますが、最初のテキスト ボックスの非表示/表示のみが表示されます... ループ内のすべてのテキスト ボックスが機能しません。

この作業を行う方法についてのアドバイスは素晴らしいでしょう。

4

2 に答える 2

0

id="content"の代わりにclass="content"を使用してください

jQuery('.content').toggle('show');

IDセレクターの場合、jQueryはJavaScript関数document.getElementById（）を使用します。複数の要素に同じIDが割り当てられている場合、そのIDを使用するクエリは、DOMで最初に一致した要素のみを選択します。

詳細については、http：//api.jquery.com/id-selector/をご覧ください。

于 2013-01-28T03:48:47.533 に答える
0

OK、あなたの質問の空白を埋めるための私の最善の推測は、すべての入力に同じIDを再利用し、すべてのdivに同じIDを再利用するような方法でそのhtmlを生成していることです。id はページ上で一意である必要があり、id JS/jQuery で要素を選択しようとすると最初のものしか見つからないため、無効な html になります。

代わりに、各入力に id の代わりに同じクラス属性を与え、div についても同様にする必要があります。アイテムの各グループが 内に独自<li>に存在する<ul>場合、または 内に独自<tr>に存在する場合は理にかなって<table>いるので、次のようにすることをお勧めします。

<ul>
   <li>
       <input type="image" class="hideshow" src="/Images/aud_down-arrow.gif" />    
       <div class="content"> 
          <textarea data-bind="text:valueoftext" rows='5' cols='60'></textarea>
       </div>
   </li>
   <li>
       <input type="image" class="hideshow" src="/Images/aud_down-arrow.gif" />    
       <div class="content"> 
          <textarea data-bind="text:valueoftext" rows='5' cols='60'></textarea>
       </div>
   </li>
   <!-- etc. -->
</ul>

次に、jQuery の DOM ナビゲーション メソッドを使用して、各画像に関連付けられた div を見つけることができます。

jQuery(document).ready(function ()     {    
    jQuery('.hideshow').live('click', function (event) {    
        jQuery(this).closest("li").find("div.content").toggle('show');
    });
});

つまり、画像がクリックされると、ツリーを上に移動して最も近いコンテナー<li>(または<tr>使用しているもの) に移動し、そこからそのコンテナー内で適切なコンテンツに戻ります。

.live()これはかなり古くなっているため、-に置き換える必要があることに注意してください.on()- 含まれている要素 (<ul>または<table>または 使用しているもの) に ID を指定し、次の"mylist"ようにします。

jQuery('#mylist').on('click', '.hideshow', function() { ...

何らかの理由で要素の各グループがコンテナになく、含まれている要素を本当に追加したくない場合でも、ID をクラスに変更する必要がありますが、これを行うことができます。

    jQuery('.hideshow').live('click', function (event) {    
        jQuery(this).next().toggle('show');
    });

つまり、クリックされたアイテムの直後にある要素を選択して切り替えます。これを最後の手段としてのみお勧めする理由は、JS を html の構造に密接に結びつけるためです。type メソッドを使用すると、$(this).closest("someParentElement").find("associatedElement")はるかに柔軟になり、html 構造を変更する必要がある場合でも変更する必要がない場合があります。

于 2013-01-28T00:53:26.067 に答える