2

リピーター内にdivタグがあり、それらのすべてのdivタグにjqueryエフェクトを追加したい場合、それはどのように行われますか？

   <script type="text/javascript">
    $(function() {
        //run the currently selected effect
        function runEffect() {
            //most effect types need no options passed by default
            var options = {};
            //check if it's scale, transfer, or size - they need options 
            //if (selectedEffect == 'scale') { options = { percent: 0 }; }

            //run the effect
            $("#effect").effect('explode', options, 500, callback);
        };

        //callback function to bring a hidden box back
        function callback() {
            setTimeout(function() {
            $("#effect:hidden").removeAttr('style').hide().fadeIn();
            }, 1000);
        };

        //set effect from select menu value
        $(document).ready(function() {
            $("div.effect").click(function() {
                runEffect();
                return false;
            });
        });
    });
</script>

<asp:Repeater ID="repItems" runat="server">
    <ItemTemplate>
 <div class="toggler">
  <div id="effect" class="ui-widget-content ui-corner-all">
   <h3 class="ui-widget-header ui-corner-all"><%#Eval("Tag") %></h3>
  </div> 
 </div>
 </ItemTemplate>
</asp:Repeater>

上記を試しましたが、最初のdivのみが機能します。私は何が間違っているのですか？

4

5 に答える 5

3

次のようなdivのクラスを使用してみてください。

<div id="effect" class="effect ui-widget-content ui-corner-all">

jqueryでは（ "div.effect"）セレクターを使用します。

同じIDを複数のものに使用すると問題が発生する可能性があると「思います」...

于 2009-10-17T16:17:28.100 に答える
2

idHTML要素の値は、ドキュメント全体で一意である必要があります。idそのルールに違反して、そのリピーターが表示する各アイテムに同じ値を使用しています。これで、Webがそのままになり、ブラウザーはそれについて文句を言いませんが、レンダリングされたHTMLをバリデーターを介して実行してみてください。jQueryは、最初のそのような要素にのみ作用します。これは、jQueryが1つだけ存在することを想定しているためです。

に切り替えるidとclass、はるかに良い結果が得られるはずです。

于 2009-10-17T16:23:34.770 に答える
0

考慮すべきもう1つのアイデアは、リピーターの周りにIDを持つdivタグを配置することです。リピーター自体は非常に単純に見え、jqueryを見ると、リピーターのどのdivタグがクリックされたかは重要ではないようです。

    $(document).ready(function() {
  $("#base").click(function() {
  runEffect();
  return false;
    });
});



<div id="base">
    <asp:Repeater ID="repItems" runat="server">
        <ItemTemplate>
     <div class="toggler">
      <div id="effect" class="ui-widget-content ui-corner-all">
       <h3 class="ui-widget-header ui-corner-all"><%#Eval("Tag") %></h3>
      </div> 
     </div>
     </ItemTemplate>
    </asp:Repeater>
</div>
于 2009-10-17T16:44:45.210 に答える
0

変更する必要があるのは、クリックイベントをアタッチする「ready」関数にあると思います。セレクターとして$（'div.effect'）を使用していますが、これは私には有効ではないようです。$（'。ui-widget-content'）を使用することをお勧めします。これは、ID（他の人が指摘しているように一意である必要があります）ではなく、クラスに基づいて選択します。

于 2009-10-17T18:56:38.713 に答える
0

リピーターにネストされたdivでクラスを使用したくない場合は、部分的なIDマッチングを使用できます。リピーターは各divのIDの先頭に情報を追加しますが（一意であることを確認するため）、IDは「効果」または使用した名前で終わります。

これを有利に使用できます。「エフェクト」IDを操作しているjQueryコードで、コードを次のように変更します。

$("#effect")

これに：

$("[id$='effect']")

これにより、IDが「effect」で終了するすべての要素が選択されるため、リピーターが各divのIDの名前を「repItems_ctl001_effect」またはあなたが持っているものに変更しても、jQueryはそれを検出します。

また、質問にリストされているjQueryコードの終わりに向かって、IDではなくクラス「effect」に基づいてdivにアクセスしようとしていることに注意してください。参考までに。

于 2009-10-17T20:44:00.283 に答える