jQuery将函数的作用域限制为目标元素

Question

下面的脚本是一个连接到管理面板中的几个小部件的切换函数。

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

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

由于小部件都是动态的，所以我不能提前知道触发器元素父元素的小部件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>

Answer 1

what properties &对象"e"有从节"函数(e){"?应该有e。target。Id, so:

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