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";
        });
    });

});

它工作得很好，但我需要解决一个问题。当我单击一个小部件的切换按钮时，它会触发具有相同类的所有小部件的功能。我正在寻找改变功能的建议，以便它只影响被点击的小部件。

由于小部件都是动态的，我不会提前知道触发元素父级的小部件 ID，但我可以使用 dom 将其传递给函数。

例如，这是一个典型的小部件。我已经在触发器元素处结束了代码。也许我可以将 dom 带回主容器元素（id=widget-43_my_box_cats-4），以便将 slideToggle() 限制为该元素的子元素？

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 回答