1

私はあなたが提供できるすべての助けをいただければ幸いです。私は高低を検索しましたが、おそらく一般的な問題であると思うものの解決策を見つけることができませんでした。私はASP.NETMVCとjQueryに非常に慣れていないので、少し余分な手を握る必要があるかもしれません。ここに行く...

foreach（ASP MVC 4）によって作成された多くの行を持つテーブルがあります。各行には、クリック時に表示/非表示にしたい追加情報があります（に含まれています）。

例えば：

====================================================================
   | Ticket Number | Date Created | Description

-    123456          11/02/2012     How do I...?
      --- Additional Information ---
      Assigned To: Joe
      Notes: Blah, blah
      --- End Additional Information ---
+     123457          11/01/2012     When I click this I get....
=====================================================================

ユーザーがプラス記号をクリックすると（私は画像を使用しています）、追加情報を展開し、プラス画像をマイナス画像に変更したいと思います。

jQueryのIFステートメントを使用して画像を変更する方法を理解しました。ただし、divを適切に切り替える方法がわかりません。私は以下を使用してこれを試してみました：

   $("button").click(function () {
       $(this).next("div.toggleMe").toggle(1000);
   });

ご覧のとおり、jQueryは検出した次のdivを展開します。これの問題は、テーブルデータと同じ行に配置できないことです。なんらかの理由で次のdivが表示されません。

私が探しているのは、次のjQuery関数のようなものを使用できるように、idまたはdivのクラスを1つ増やす方法です。

    function slideonlyone(thechosenone) {
         $('.newboxes2').each(function(index) {
              if ($(this).attr("id") == thechosenone) {
               $(this).slideDown(200);
              }
              else {
                   $(this).slideUp(600);
              }
         });
    }

<table>
   <tr>
      <td>
         <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;">
            <a id="myHeader1" href="javascript:slideonlyone('newboxes1');" >slide this one only</a>
         </div>
         <div class="newboxes2" id="newboxes1" style="border: 1px solid black; background-color: #CCCCCC; display: block;padding: 5px;">Div #1</div>
      </td>
      <td>
         <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;">
            <a id="myHeader2" href="javascript:slideonlyone('newboxes2');" >slide this one only</a>
         </div>
         <div class="newboxes2" id="newboxes2" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px;">Div #2</div>
      </td>
      <td>
         <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;">
            <a id="myHeader3" href="javascript:slideonlyone('newboxes3');" >slide this one only</a>
         </div>
         <div class="newboxes2" id="newboxes3" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px;">Div #3</div>
      </td>
   </tr>
</table>

HTMLでわかるように、各divには一意のIDがあります。foreachループで一意のIDを作成するにはどうすればよいですか？そして、divを切り替えることができるようにjQueryにその一意のIDを表示させるにはどうすればよいですか？

あなたが提供できる情報をありがとうございました！

4

1 に答える 1

2

HTMLが次のように構成されている場合：

<div>
    <button>Click me</button>
</div>
<div class="toggle">
    This is initially hidden content
</div>

次に、$(this).next('div')ボタンの観点からの呼び出しは、2番目のdivを見つけることはありません。それは、その親divによってバインドされています。あなたが本当にやろうとしているのは、ボタンの親要素から始まる次のdivを見つけることです。

$('button').click(function(){
    $(this).parent().next('div.toggle').toggle(1000);
});

上記のHTMLを使用すると、そのスクリプトスニペットは、ボタンの親divで始まる次のdivの検索を開始する必要があります。この状況では、切り替える正しい要素を見つける必要があります。

于 2012-11-06T01:23:05.407 に答える