1

私はこのjqueryコードを持っています:

<script type="text/javascript">

    jQuery(document).ready(function($){  
        // hides the slickbox as soon as the DOM is ready
        $('#slickbox').hide();
        // shows the slickbox on clicking the noted link  
        $('#slick-show').click(function() {
            $('#slickbox').show('slow');
            return false;
        });
        // hides the slickbox on clicking the noted link  
        $('#slick-hide').click(function() {
            $('#slickbox').hide('fast');
            return false;
        });
        // toggles the slickbox on clicking the noted link  
        $('#slick-toggle').click(function() {
            $('#slickbox').toggle(400);
            return false;
        });
    });
    </script>

問題は、同じ div の複数のインスタンスに対してコードを機能させるにはどうすればよいかということです。

このように、最初の for ループの div に対して機能します。

更新: クラスを使用しました。すべての div が一度に切り替えられるようになりました。たとえば、ループによって生成された 3 番目のリンクをクリックすると、3 番目のスリックボックスのみが表示されます。ご理解いただければ幸いです。

<?       for ($i = 1; $i <= get_option('category_nr'); $i++): 

         <table class="form-table">
            <tr valign="top">
                <td colspan="2"><a href="#" class="slick-toggle<? echo $i; ?>">Toggle the box</a></td>
            </tr>
        </table>

        <div class="slickbox<? echo $i; ?>">
                Content
        </div>

<?      endfor; ?>

ありがとうございました！

4

4 に答える 4

1

編集：

すべてのリンクが 1 つの div を切り替えます。リンクの ID は、div のクラスと同じでなければなりません。

コードはテストされていません:

HTML:

<a href="#" class="toggle_link" id="toggle_1">link 1</a>
<div class="toggle_1">Box 1</div>

<a href="#" class="toggle_link" id="toggle_2">link 2</a>
<div class="toggle_2">Box 2</div>

jQuery:

$('a.toggle_link').click(function(e) {
  e.preventDefault();
  $('.'+$(this).attr('id')).toggle();
});
于 2012-07-03T23:34:37.357 に答える
0

何を達成しようとしているのかわかりませんが、これは次のようです。

この実用的なフィドルの例を参照してください！

次のHTMLを想定しています。

<div id="actions">
    <button id="slick-show">Show all</button>
    <button id="slick-hide">Hide all</button>
</div>
<div class="slickbox">Hello</div>
<div class="slickbox">Hello</div>
<div class="slickbox">Hello</div>
<div class="slickbox">Hello</div>
<div class="slickbox">Hello</div>

jQuery

jQuery(document).ready(function($){

  // define the target element
  var $target = $('.slickbox');

  // hides all by default
  $target.hide();

  // shows all
  $('#slick-show').bind("click", function(event) {
    event.preventDefault();
    $target.show('slow');
  });

  // hides all
  $('#slick-hide').bind("click", function(event) {
    event.preventDefault();
    $target.hide('fast');
  });

  // toggles the clicked one
  $target.bind("click", function(event) {
    event.preventDefault();
    $(this).toggle(400);
  });

});
于 2012-07-04T00:00:16.910 に答える
0

ID ではなく、クラスまたはその他の属性にクリックをバインドします。

たとえば、新しい属性を作成し、それにバインドしています。

$('div[rel="slickbox"]').hide();

<div rel="slickbox" id="slickbox">

私はあなたがアイデアを得たと思います。

Ps: ID は一意である必要があります。ループで同じ ID を使用しないでください。一意にしてください。

編集:解決策で応答を更新する:

サンプル HTML:

    <a class="click" id="id1" rel="1">Click me</a>
    <a class="click" id="id2" rel="2">Or me</a>
    <a class="click" id="id3" rel="3">Or to me</a>

    <br /><br />
    <div id="hidden1" class="hidden">First Hidden Div <button class="closeme">Close Me</button></div>
    <div id="hidden2" class="hidden">Second Hidden Div <button class="closeme">Close Me</button></div>
    <div id="hidden3" class="hidden">Third Hidden Div <button class="closeme">Close Me</button></div>​

サンプル jQuery:

$(function(){

    $('.click').click(function(){
        if($('#hidden'+$(this).attr('rel')).is(':hidden')) {
            $('#hidden'+$(this).attr('rel')).show('fast');
        } else {
            $('#hidden'+$(this).attr('rel')).hide('fast');
        }
    });

    $('.closeme').click(function(){
    $(this).parent('div').hide('fast');
    });

});​

閉じるボタンがトグル順序を強制終了していたため、トグル イベントを更新し、クリックされるたびにそのステータスを確認する必要がありました (つまり、ここをクリックし、div を開いて div 内の閉じるボタンで閉じ、主なトグルです。私の言いたいことがわかるでしょう。)

サンプル CSS:

.click {
 display:block;
 cursor:pointer;    
}

.hidden {
 display:none; /*hide for default*/
background:red;
 color: white;   
}

こちらからご確認いただけます。この方法で、任意のリンクを必要なものに関連付けることができます。</p>

于 2012-07-03T23:33:24.503 に答える
0

複数の同一の ID を生成してはなりません。空のクラス「slickbox」を作成して使用します

 <div id="slickbox_<?php print "$i"; ?>" class="slickbox">

そしてjQueryは「#slickbox」の代わりに「.slickbox」を選択します。

編集: id による「slickbox」への他の参照も確認します (CSS など)。

クリック関数は、id またはクラスではなく、クリックされたオブジェクトを参照する必要があります。

$('.slick-show').click(function() {
        self.show('slow');
        return false;
});
于 2012-07-03T23:34:49.920 に答える