分配单击的元素's ID作为另一个元素的类名

Assigning clicked element's ID as classname to another element

本文关键字：元素 另一个 ID 单击 分配      更新时间：2023-09-26

我正在做一个项目，但我写的代码真的错了：

$('#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、majit）。

如果我想让它有两对，比如用posht改变lart，用djatht改变majit，顺便说一句，这就是id的含义：lart=up-posht=downmajt=leftdjatht=right，所以如果我点击向上按钮，然后我点击右键，使类保持向上，它只会再添加一个名为right或left的类！或者如果我点击向下按钮，那么我可以更改右侧或左侧，但会是（向下和左/右或向上和左/左），这可能吗？

不需要switch语句。只需选择所有元素，绑定事件处理程序，并使用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);
});

更新：评论中发布的问题解决方案（为了更容易理解，我将使用英文单词作为指示）：

var opposites = {
        up:     'down',
        down:   'up',
        right:  'left',
        left:   'right'
    };
$('#up, #right, #down, #left').click(function() {
    $("#form3").addClass(this.id).removeClass( opposites[this.id] );
});

updated:一次只追加一个类。

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

不确定为什么要转义引号，但如果一次只想要一个类，请使用。。。

.prop('class', this.id);

而不是CCD_ 1。

我在这里使用data-属性而不是类名。

$.each(['lart', 'posht', 'djatht', 'majt'], function (idx, id) {
  $('#' + id).click(function () {
    $('#form3').attr('data-selected', id)
  })
})

这样，每次单击其中一个触发器时，都会覆盖以前的值。如果需要，可以在CSS选择器中使用data-属性：

#form3[data-selected="lart"] {
  ...
}
相关文章：