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

});

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

由于小部件都是动态的，我不会事先知道触发元素父级的小部件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

什么属性＆amp;对象“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";
     });
  });
});

jQuery仅将函数的范围限制为目标元素

1 个答案: