javascript - 将单击的元素的 ID 作为类名分配给另一个元素

Question

我正在做一个项目，但我编写的代码确实是错误的:

$('#lart').click(function(){
  $("#form3").addClass("lart");
});
$('#posht').click(function(){
  $("#form3").addClass("posht");
});
$('#majt').click(function(){
  $("#form3").addClass("majt");
});
$('#djatht').click(function(){
  $("#form3").addClass("djatht");
});

我考虑用 switch 语句来制作它，但我不知道如何为情况制作变量。上面的代码无法正常工作，因为当我单击更多选项时，它会添加更多类，而我不希望它添加更多类，而只是其中之一(lart、posht、djatht、majt)。

如果我希望它有两对，比如用 posht 更改 lart，用 djatht 更改 majt，顺便说一下，这就是 ids 的含义: lart=up posht=down majt=left djatht=right 所以如果我单击“向上”按钮，然后单击“向右”，该类将继续添加 1 个类，称为“右”或“左”!或者如果我单击向下按钮，那么我可以更改右侧或左侧，但它会是(向下和左/右或向上和左/右)这可能吗？

Answer 1

不需要 switch 语句。只需选择所有元素，绑定(bind)事件处理程序，然后使用 ID 作为类:

$('#lart, #posht, #majt, #djatht').click(function(){
    $("#form3").prop('class', this.id);
});

<小时/>

如果您想确保没有删除任何其他类，请使用:

$('#lart, #posht, #majt, #djatht').click(function(){
    $("#form3").removeClass('lart posht majt djatht').addClass(this.id);
});

<小时/>

更新:评论中发布的问题的解决方案(为了更容易理解，我将使用英文单词 for 来指示):

var opposites = {
        up:     'down',
        down:   'up',
        right:  'left',
        left:   'right'
    };

$('#up, #right, #down, #left').click(function() {

    $("#form3").addClass(this.id).removeClass( opposites[this.id] );
});