-3

私はこの JavaScript hide 関数を持っているので、要素自体がループしているため、複数のインスタンスがあります。コード：

<script>
//<![CDATA[
 $(document).ready(function()
 {
   $('.aval').hide().before('');
   $('a.toggle-aval').click(function() 
       {
        $('.aval').slideToggle(1000);
        return false;
   });
 });
//]]>
</script>

クリックした要素にのみ影響を与える方法はありますか?

4

3 に答える 3

2

.aval要素がa.toggle-aval内にある場合は、次のことを試してください。

<script>
//<![CDATA[
 $(document).ready(function(){
   $('.aval').hide().before('');
   $('a.toggle-aval').click(function() {
        $(this).find('.aval').slideToggle(1000);
        return false;
   });
 });
//]]>
</script>
于 2012-08-05T02:25:26.603 に答える
2

thisクリックされた要素を使用するために使用します。avalクラス要素がトグルクリックの子であると仮定します。htmlなしで言うことは不可能です。それらがインデックスに基づいている場合は、クリックされた要素のインデックスを使用してアクセスできます

<script>
//<![CDATA[
 $(document).ready(function(){
   $('.aval').hide().before('');
   $('a.toggle-aval').click(function() {
        $(this).find('.aval').slideToggle(1000);
        // or
        $('.aval').eq( $(this).index() ).slideToggle(1000);
        return false;
   });
 });
//]]>
</script>
于 2012-08-05T02:26:28.137 に答える
0

ループで適切に機能するものを見つける前に、そのすべてとさらに半ダースのバリエーションを試しました。ここにあります：

<script>
//<![CDATA[
$(document).ready(function ()
              {
                    $('.container').each(function () {
                        $(this).find('.content').hide();
                        $(this).find('.button').click(function ()
                        {
                            $(this).parent().find('.content').slideToggle(1500);
                        });
                    });
              });
 //]]>
 </script>

.container , .content {display:block;}

 <span class="container">
  ......visable content
  <span class="button">
  more info 
  </span>

  <span class="content">
  .......hidden content
  </span>

  </span>
于 2012-08-05T23:55:31.590 に答える