0

私のphpはすべての車をループで吐き出すので、各車は同じdiv idとクラスを取得しますが、異なる情報を取得します私の問題は、私のプラグインが同じdivでのみ機能することです。

この関数をインテリジェントにして、どの div コンテンツを非表示または表示する必要があるかを知るにはどうすればよいですか

私の例をチェックしてください http://jsfiddle.net/S2HEw/

(function ($) {
    $.fn.showHide = function (options) {

    //default vars for the plugin
        var defaults = {
            speed: 1000,
            easing: '',
            changeText: 0,
            showText: 'Show',
            hideText: 'Hide'

        };
        var options = $.extend(defaults, options);

        $(this).click(function () {
// optionally add the class .toggleDiv to each div you want to automatically close
                      $('.toggleDiv:hidden').slideUp(options.speed, options.easing);
             // this var stores which button you've clicked
             var toggleClick = $(this);
             // this reads the rel attribute of the button to determine which div id to toggle
             var toggleDiv = $(this).attr('rel');
             // here we toggle show/hide the correct div at the right speed and using which easing effect
             $(toggleDiv).slideToggle(options.speed, options.easing, function() {
             // this only fires once the animation is completed
             if(options.changeText==1){
             $(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText);
             }
              });

          return false;

        });

    };
})(jQuery);



$(document).ready(function(){

   $('.show_hide').showHide({
        speed: 250,  // speed you want the toggle to happen
        easing: '',  // the animation effect you want. Remove this line if you dont want an effect and if you haven't included jQuery UI
        changeText: 1, // if you dont want the button text to change, set this to 0
        showText: 'View',// the button text to show when a div is closed
        hideText: 'Close' // the button text to show when a div is open

    });

});

html、これはたくさんありますが、それらはすべて同じ名前であり、それが私のトグルボタンが失敗する理由です.

<a class="show_hide" href="#" rel="#slidingDiv">View</a>
            <div id="slidingDiv" class="toggleDiv" style="display: none;">
            <div class="right">
</div>
</div>

私は自分のphpループを更新できないことに注意してください。したがって、jqueryがどのdivで動作しているかを知る方法を見つける必要があります。それらはすべて同じdiv IDを持っていますか? 私はPHPに増加する数を実行させ、それをクラスに追加してからjquery側に追加できますか?? これが私が立ち往生している場所であることを確認してください

これを動的に機能させる方法がわかりません

4

1 に答える 1

1

slidingDiv要素の ID が重複しています。idの要素はドキュメント内で一意でなければなりません

id-attribure のドキュメントから

id 属性は、その要素の一意の識別子 (ID) を指定します。値は、要素のホーム サブツリー内のすべての ID の中で一意である必要があり、少なくとも 1 文字が含まれている必要があります。値に空白文字を含めることはできません。

<!-- DIV 1-->
<a class="show_hide" href="#" rel="#slidingDiv1">View</a>
<div id="slidingDiv1" class="toggleDiv" style="display: none;">
    <div class="right">
        DIV 1

    </div>
</div>
<!-- DIV 2-->
<a class="show_hide" href="#" rel="#slidingDiv2">View</a>
<div id="slidingDiv2" class="toggleDiv" style="display: none;">
    <div class="right">
        DIV 2

    </div>
</div>
<!-- DIV 3-->
<a class="show_hide" href="#" rel="#slidingDiv3">View</a>
<div id="slidingDiv3" class="toggleDiv" style="display: none;">
    <div class="right">
        DIV 3

    </div>
</div>

また、:hidden の代わりに :visible を使用する必要があります

$('.toggleDiv:visible').slideUp(options.speed, options.easing);

デモ:フィドル

于 2013-07-12T03:11:15.577 に答える