Question

如何更一般地编写此功能。所以我不必一遍又一遍地重复这个过程？

jQuery("input[name='option1']").change(function () {
    $("#option1").addClass('highlight');
    setTimeout(function () {
        $("#option1").removeClass("highlight");
    }, 100);
});

jQuery("input[name='option2']").change(function () {
    $("#option2").addClass('highlight');
    setTimeout(function () {
        $("#option2").removeClass("highlight");
    }, 100);
});

jQuery("input[name='optionX']").change(function () {
    $("#optionX").addClass('highlight');
    setTimeout(function () {
        $("#optionX").removeClass("highlight");
    }, 100);
});

Answer 1

您可以使用attribute starts with selector在名称以<input>开头的所有option元素上绑定事件。

// Bind change event on all the `<input>` elements whose `name` attribute starts with `option`.
$('input[name^="option"]').change(function () {
    // Get the `name` of this element
    var name = $(this).attr('name'),
        elem = $('#' + name); // Get the corresponding element whose id is same as the name of this element

    elem.addClass('highlight');
    setTimeout(function () {
        // Use cached element object
        elem.removeClass('highlight');
    }, 100);
});

Answer 2

你可以试试这个：

//I would rather use a class instead of just input but anyhow...
$('input').change(function(){
    var elem_name = $(this).attr('name');
    $('#'+elem_name ).addClass('highlight');
    setTimeout(function () {
        $('#'+elem_name).removeClass('highlight');
    }, 100);
});

在多个输入上简化类似的更改事件处理程序

2 个答案: