如何避免JQuery中的代码重绘？

使用JQuery可以缩短代码，而不是为每个新控件重复代码吗

//input control_1
    $("#control_1").click(function() {
            $("#control_1").addClass("CellInput");
            $("#control_1").removeClass("CellInput_");
        }); 
            
        $("#control_1").focusout(function() {
            $("#control_1").removeClass("CellInput");
            $("#control_1").addClass("CellInput_");   
        });

//input control_2
    $("#control_2").click(function() {
            $("#control_2").addClass("CellInput");
            $("#control_2").removeClass("CellInput_");
        }); 
            
        $("#control_2").focusout(function() {
            $("#control_2").removeClass("CellInput");
            $("#control_2").addClass("CellInput_");   
        });

//input control_3
    $("#control_3").click(function() {
            $("#control_3").addClass("CellInput");
            $("#control_3").removeClass("CellInput_");
        }); 
            
        $("#control_3").focusout(function() {
            $("#control_3").removeClass("CellInput");
            $("#control_3").addClass("CellInput_");   
        });

我试着像下面那样缩短它，但仍然不起作用，或者我错过了一些东西

$("#control_1 #control_2 #control_3").click(function() {
        $(this).addClass("CellInput");
        $(this).removeClass("CellInput_");
    }); 
        
    $("#control_1 #control_2 #control_3").focusout(function() {
        $(this).removeClass("CellInput");
        $(this).addClass("CellInput_");   
    });

你会想要的

$("#control_1,#control_2,#control_3")

由于

$（“#control_1#control_2#control_3”）

将与

control_2

元素中的

control_3

元素相匹配。

如果有3个以上的元素，您甚至可以将其缩短：

$("#control_1, #control_2, #control_3").click(function() {
  $(this).toggleClass("CellInput");
});

$("#control_1, #control_2, #control_3").focusout(function() {
    $(this).toggleClass("CellInput"); 
});

$('[id^=control_]').click({
//blah
})

---

这将选择其ID以

control.

开头的所有元素

Cellinput.
还有另一个类
Cellinput.
，而不是add
$（this）.toggleClass（“Cellinput”）