如何知道输入何时更改了其类答案

【问题标题】：How to know when an input has changed its class如何知道输入何时更改了其类
【发布时间】：2013-01-02 19:27:01
【问题描述】：

我有一个功能是删除类并将其添加到输入标签中，我想当我们添加或删除类时，一个函数应该提醒您已进行更改。

<head>
    <script type="text/javascript">
        $(function() {
            $('a').click(function() {
                $('input').removeClass()
                var cl = $(this).attr('class')
                $('input').addClass(cl)
            })
        })

        function activitydone() {
            alert('class change')
        }
    </script>

    <style>
        .first { border:solid 1px #F00 }
        .second { border:solid 1px #0F0 }
        .third { border:solid 1px #00F }
    </style>
</head>

<body>
    <input type="text" onchange="activitydone()" />

    <a href="#" class="first">first</a>
    <a href="#" class="second">second</a>
    <a href="#" class="third">third</a>
</body>

【问题讨论】：

你为什么不把那个代码和改变类的代码一起放进去？
请注意正确格式化您的代码。它使您和其他人更容易和更快地阅读和理解它正在尝试做什么。此外，您的 javascript 和 CSS 行末尾缺少 ;。
“规范”的解决方案是使用 DOM Mutation Observers (stackoverflow.com/questions/2844565/…, developer.mozilla.org/en-US/docs/DOM/MutationObserver)，但这通常仅在您的变更检测代码必须分开时才需要从进行更改的代码中。请遵循@Blender 的建议，除非由于某种原因无法做到（例如，您的更改检测代码位于浏览器扩展中）。

标签： javascript jquery

【解决方案1】：

除非这是一个不完整的例子......

<script type="text/javascript">
    $(function() {
        $('a').click(function() {
            $('input').removeClass()
            var cl = $(this).attr('class')
            $('input').addClass(cl)
            activitydone(); // <-- Do this?
        })
    })

    function activitydone() {
        alert('class change')
    }
</script>

【讨论】：

这应该可以。可能没有理由根据 OP 的代码将警报放入函数中。
@SethenMaleno 不，可能不是，但 10 比 1 这是一个不完整的例子，我敢打赌 OP 在他的实际代码中做的不仅仅是一个警报。
@SethenMaleno 这主要是推测，但我认为这个想法是acticitydone 可能会在开发后期做很多事情，所以更多的是DRY 将这组操作放在一个函数中，而不是而不是每次需要时都包括在内。
谢谢。我喜欢这种方法
@apsillers 如果是这种情况，它不应该提醒“类更改”。如果要在代码的不同部分将警报用于不同的事情，他应该每次传递一个参数并更改警报。这个函数不带参数好像没用。

【解决方案2】：

除非我遗漏了一些明显的东西，否则只需将代码放在类更改之后：

$('a').click(function(){
    $('input').removeClass();
    var cl= $(this).attr('class');
    $('input').addClass(cl);

    alert('class change');
});

另外，semicolons。

【讨论】：

【解决方案3】：

您可以触发自定义事件并进行处理：

$(function() {
    $('a').click(function() {
        $('input').removeClass();
        var cl = $(this).attr('class');
        $('input').addClass(cl);
        $('input').trigger('classChange');
    });
    $('input').on('classChange', function() {
        activitydone(this);
    });
})

function activitydone() {
    alert('class change');
};

编辑注意：从您的标记中删除：onchange="activitydone()"

这是一个小提琴页面，您可能会发现结合您的两个问题（至少部分）很有用 http://jsfiddle.net/ekKG3/

【讨论】：

请注意，这可能会像其他 cmets 和答案所表明的那样简单得多，但应该给你一个工作的开始......至少
该函数什么都不做 - 只是按照你的例子，因为我不知道你所有的问题域。
我可以看到你对 jquery 有很好的了解，你能回答这个stackoverflow.com/questions/14127568/…，我知道它很难修复，但你可以试一试。提前致谢