2

そのため、リストの複数の div を含むインデックス ページがあります。各 div には動的に作成された ID があり、この場合は edit_<%= address.id%> です。個々の div にカーソルを合わせると非表示のリンクが表示されるか、この個々のリストの編集リンクをクリックするとフォームがポップアップするように、jquery を作成しようとしています。次のようにインラインで実行できます。

onclick="$('#edit_<%= address.id %>').dialog();"

しかし、次のように私のapplication.jsファイルに一度：

$(document).ready(function() {
$('#edit_<%= @address.id%>').dialog();
});

うまくいきません。この変数が実際に意味を持つビュー/コントローラーの外で使用しているためだと思います。これに対する解決策はありますか？

4

3 に答える 3

0

すべてのターゲット DIV に特定のクラス名を使用します。事前に定義されたクラス名を使用すると動的 ID を持ちますが、単純な jQuery を使用してそれらを見つけることができます。その後、アプリケーションの JS ファイルにコードを記述し、それらの特定のクラス名のみをターゲットにすることができます。

更新：これは、あなたが望むものを与える例です。これは単純な HTML/Javascript ですが、コンテナー DIV は一意の ID を使用しますが、共通のクラス名を使用します。これを Rails アプリに簡単に移動できます。

<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <style>
      .hidden-div {
        border: 1px solid silver;
        margin-bottom: 10px;
      }
      .hidden-div DIV {
        display: none;
      }
    </style>
    <script>
      $(function() { 
        $(".hidden-div").hover(function() {
          // we are hovering over a hidden-div class
          $(this).children("div").show();
        }, function() {
          // we are moving out of a hidden-div class
          $(this).children("div").hide();
        });
      });
    </script>
  </head>
  <body>

    <div id="random-id-1434" class="hidden-div">
      Hover over me to reveal my hidden fields
      <div>A hidden field</div>
      <div>A hidden field</div>
      <div>A hidden field</div>
      <div>A hidden field</div>
    </div>

    <div id="random-id-342" class="hidden-div">
      Hover over me to reveal my hidden fields
      <div>A hidden field</div>
      <div>A hidden field</div>
      <div>A hidden field</div>
      <div>A hidden field</div>
    </div>

    <div id="random-id-887" class="hidden-div">
      Hover over me to reveal my hidden fields
      <div>A hidden field</div>
      <div>A hidden field</div>
      <div>A hidden field</div>
      <div>A hidden field</div>
    </div>

  </body>
</html>
于 2013-04-09T21:27:16.453 に答える
0

すべてのcss要素が同じ開始IDまたはクラスを持っていることを確認してから、これに似たjqueryを使用してそれらを選択できます。これにより、IDの先頭に編集があるすべてのdivが選択されます$('div[id^="#edit_"]').hover.dialog();

以下は、このセレクターの使用方法に関するドキュメントです

http://api.jquery.com/attribute-starts-with-selector/

于 2013-04-09T21:40:35.710 に答える