0

以下のスクリプトは、管理パネルの複数のウィジェットに関連付けられているトグル機能です。

jQuery(document).ready(function()
{
    jQuery(document).on('click','.toggleExtras', function(e){
        jQuery('.extras').slideToggle();
        jQuery(this).text(function(el, old){
            return old == "Show Advanced Options" ? "Hide Advanced Options" : "Show Advanced Options";
        });
    });

});

これはうまく機能しますが、解決しなければならない問題が 1 つあります。1 つのウィジェットのトグルをクリックすると、同じクラスを持つすべてのウィジェットの関数がトリガーされます。クリックされたウィジェットにのみ影響するように機能を変更するための提案を探しています。

ウィジェットはすべて動的であるため、トリガー要素の親のウィジェット ID を事前に知ることはできませんが、dom を使用してそれを関数に渡すことができる場合があります。

たとえば、これは典型的なウィジェットです。トリガー要素でコードを終了しました。おそらく、slideToggle() をその要素の子のみに制限するために、DOM をメイン コンテナ要素 (id=widget-43_my_box_cats-4) まで戻すことができますか?

HTML:

<div id="widget-43_my_box_cats-4" class="widget">   
    <div class="widget-top">
        <div class="widget-title-action"></div>
        <div class="widget-title"><h4>Widget Title<span class="in-widget-title"></span></h4></div>
    </div>

    <div class="widget-inside" style="display: block;">
        <form action="" method="post">
            <div class="widget-content">
                <p>
                    <label for="widget-my_box_cats-4-title">Title:</label>
                    <input class="widefat" id="widget-my_box_cats-4-title" name="widget-my_box_cats[4][title]" type="text" value="">
                </p>

                <fieldset><legend><span class="toggleExtras">Hide Advanced Options</span></legend>
4

1 に答える 1

0

「関数（e）{」セクションから「e」が持っているプロパティとオブジェクトは何ですか？e.target.id が必要なので、次のようにします。

jQuery(document).ready(function()
{
jQuery(document).on('click','.toggleExtras', function(e){
    jQuery('#'+e.target.id).slideToggle();
    jQuery(this).text(function(el, old){
        return old == "Show Advanced Options" ? "Hide Advanced Options" : "Show Advanced        Options";
     });
  });
});
于 2013-02-26T13:32:55.050 に答える