Question

好的，所以我最初做的是在我的表单中添加一个类，并在select更改后为我的select添加标签。这很好。我现在要做的是使保存按钮仅在选择被更改时显示。

document.getElementById('href_attr').addEventListener('change', change, false);
document.getElementById('alt_attr').addEventListener('change', change, false);
document.getElementById('title_attr').addEventListener('change', change, false);

//document.getElementById('href_attr').addEventListener('change', allChanged(), false);


function change() {
    alert('test');
    utils.addClass(form, 'changed');
    utils.addClass(this.parentNode, 'changed');
}

function allChanged(){
    utils.show(save_button);
}

document.getElementById('save_button').addEventListener('click', save, false);

因此，出于某种原因，当我调用更改功能时，警报会在正确的时间发生（当我更改选择框时）。当我有它调用allChanged函数时，它会在页面加载时调用。这是我称之为功能的唯一地方。此外，我正在寻找一种方法来显示所有选择已更改的保存按钮，而不仅仅是一个。我怎样才能做到这一点？我遇到了jQuery的$ .when并尝试过：

$.when(href_attr.addEventListener('change'),
        alt_attr.addEventListener('change'),
    title_attr.addEventListener('change')
    ).done(allChanged());

和

$.when("#href_attr,#alt_attr,#title_attr").change(allChange());

没有运气。

Answer 1

您可以尝试使用回调。例如，在您的选择输入上：

$('selector').on('change', function(event) {
    if ( $(this).val() )
    {
        // select has value so we can handle accordingly.
        updateClassNames(function(response() {
            alert('class names updated');
            $('selector:hidden').show();
        });
    }
    else
    {
        // select has no value so don't do anything (or undo what we just did).
    }
});

funciton updateClassNames(callback) {
    $('selector').addClass('myClass');
    callback();
}

Answer 2

jQuery.when接受延迟/承诺和静态对象。因此，要开始做你想要的事情，你需要创建受变更事件影响的承诺：

function change(node) {
    alert('test');
    utils.addClass(form, 'changed');
    utils.addClass(node.parentNode, 'changed');
}

function allChanged(){
    utils.show(save_button);
}

$.when(
    $.Deferred(function(defer) {
        href_attr.addEventListener('change', function() {
            change(href_attr);

            defer.resolve();
        })
    }),
    $.Deferred(function(defer) {
        alt_attr.addEventListener('change', function() {
            change(alt_attr);

            defer.resolve();
        })
    }),
    $.Deferred(function(defer) {
        title_attr.addEventListener('change', function() {
            change(title_attr);

            defer.resolve();
        })
    })
).done(allChanged);

document.getElementById('save_button').addEventListener('click', save, false);

此实现还意味着您将不再需要前三个绑定到更改事件。

参考文献：http://api.jquery.com/jQuery.when/，http://api.jquery.com/jQuery.Deferred/

Answer 3

这是一个快速而肮脏的刺，我可以在几个小时内做得更好，虽然有人可能会打败我。

document.getElementById('href_attr').addEventListener('change', change, false);
document.getElementById('alt_attr').addEventListener('change', change, false);
document.getElementById('title_attr').addEventListener('change', change, false);

var href = false;
var alt = false;
var title = false;

function change() {
    alert('test');
    utils.addClass(form, 'changed');
    utils.addClass(this.parentNode, 'changed');

    switch(this.id) {
        case "href_attr"
            href = true;
            break;
        case "alt_attr"
            alt = true;
            break;
        case "title_attr"
            title = true;
            break;
    } 

    checkChanged();
}

function checkChanged() {
    if ((href) && (alt) && (title)) {
        utils.show(save_button);
    }
}

document.getElementById('save_button').addEventListener('click', save, false);

那应该做的工作（或类似的东西），这里也没有jquery。

我的javaScript函数没有在适当的时候调用

3 个答案: