javascript - jQuery - 该函数没有获取 ID/类

Question

此函数不会获取 ID 或类(第一行)，因此代码将应用于所有字段集。对我来说这不是一个大问题，但我希望将代码集中在两个特定的 ID 上，以使代码更兼容插件。

$('#feedburner_widget').ready(function() {
$('input').focus(
function(){
    $(this).closest('fieldset').addClass('fieldset change-fieldset');
});

$('input').blur(
function(){
    $(this).closest('fieldset').removeClass('change-fieldset');
});
});

基本上，当用户单击输入字段时，此代码将一个类添加到字段集中。 ID 位于第一行，但代码将效果应用于所有字段集。如果我将 '#feedburner_widget' 更改为 document，它的工作方式完全相同。我做错了什么？谢谢。

编辑:这是 HTML 代码:

    <form id="feedburner_widget" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=<?php echo esc_attr($user); ?>', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
        <fieldset >
            <input type="text" class="field" name="email" placeholder="<?php echo esc_attr($text); ?>" />
            <input type="hidden" value="<?php echo esc_attr($user); ?>" name="uri" />
            <input type="hidden" name="loc" value="<?php bloginfo('language'); ?>"/>
            <span>
                <input type="submit" value="" />
            </span>
        </fieldset>
    </form>

Answer 1

当您执行$('input')时，您是在要求 jQuery 在整个文档中进行全局搜索。它不会“记住”您刚刚获取了 #feedburner 元素。

要仅搜索 #feedburner 元素中的元素，您可以在 jQuery 对象上使用 find() 函数，如下所示:

$(document).ready(function() {
    var $inputs = $('#feedburner_widget').find('input');
    $inputs.focus(function(){
        $(this).closest('fieldset').addClass('fieldset change-fieldset');
    });

    $inputs.blur(function(){
        $(this).closest('fieldset').removeClass('change-fieldset');
    });
});

在这种特殊情况下，您还可以更改 CSS 选择器以直接搜索 #feedburner_widget 内的输入，如下所示:$('#feeburner_widget input')但是，如果该元素已存在于代码中的变量中，则应使用 find 方法。