Question

下面的代码显示input聚焦时其父fieldset背景颜色发生了变化。我希望fieldset保持该背景颜色，直到另一个fieldset中的输入被聚焦。下面的概念有效，除非字段集包含多个输入，当下一个输入被聚焦时，更改将被激活。有什么想法吗？谢谢！

的jQuery

jQuery("input[title]").focus(function() {
    jQuery(this).closest('fieldset').animate({backgroundColor: "#7e7451", color: "#ffffff"}, 'slow');
});

jQuery("input[title]").blur(function() {    
    jQuery(this).closest('fieldset').animate({backgroundColor: "transparent", color: "#777777"}, 'slow');
});

HTML

<fieldset name="Fieldset 1" id="fieldset1">
    <legend>Fieldset 1</legend>
    <label for="input1"><strong>Input 1</strong>
        <input type="text" name="input1" id="input1" />
    </label>
    <label for="input2"><strong>Input 2</strong>
        <input type="text" name="input2" id="input2" />
    </label>
</fieldset>

<fieldset name="Fieldset 2" id="fieldset2">
    <legend>Fieldset 2</legend>
    <label for="input3"><strong>Input 3</strong>
        <input type="text" name="input3" id="input3" />
    </label>
    <label for="input4"><strong>Input 4</strong>
        <input type="text" name="input4" id="input4" />
    </label>
</fieldset>

etc

Answer 1

首先，由于您正在设置背景颜色，我假设您使用jQuery-UI。这意味着如果在javascript中使用样式更改direclty，则应该使用类进行动画处理。

然后，为了能够执行您要执行的操作，您需要将当前“活动字段集”保存在变量中。这样，只有当它真的不再活动时才能触发样式更改。

所以这就是你的CSS应该是这样的：

fieldset {
    background-color: transparent;
    color: #777;
}
fieldset.active {
    background-color: #7e7451;
    color: #FFF;
}

JavaScript将是

var activeFs = jQuery('#fieldset1'); // must be valid

jQuery("input")
    .focus(function() {
        var fs = jQuery(this).closest('fieldset');
        if (activeFs.attr('id') != fs.attr('id')) {
            activeFs.removeClass('active', 'slow');
            activeFs = fs;
        }
        fs.addClass('active', 'slow');
    }).blur(function() {
        var fs = jQuery(this).closest('fieldset');
        if (activeFs.attr('id') != fs.attr('id')) {
            fs.removeClass('active', 'slow');
        }
    });

注意：请注意，当您从一个输入转到另一个输入时，两个事件同时触发。这意味着您无法在blur()知道某个地方是否仍有焦点输入，因此此脚本将始终保持最后一个焦点处于活动状态的字段集。但是，当用户点击其他地方或提交表单时，您当然可以轻松删除active类。

如果你想玩代码，那么这是一个FIDDLE。

Jquery在输入焦点上更改Fieldset背景颜色

1 个答案: