は、私はプロジェクトに取り組んでいますが、私が書いたコードは本当に間違っている別の要素

Question

にクラス名として、クリックされた要素のIDを割り当てる：

$('#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）だけです。

もし私がdhathtとposhtとmajtを使ってlartを変更するのと同じように、これが2つのペアを持っていれば、これはidの意味です：lart = up posht = down majt = left djatht = right so私が上のボタンをクリックすると、クラスを右クリックして、右に1つ以上のクラスを追加するか、または左にします。または、私がダウンボタンをクリックすると、私は右または左を変更することができますが、これは可能ですか（上下および左/右または上および左/右）でしょうか？

Answer 1

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]); 
}); 

Answer 2

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

あなたが引用符をエスケープしていますが、一度に一つのクラスをしたい場合は、使用してきた理由はわからない... ...ではなくaddClass。

Answer 3

更新：一度に1つのクラスのみを追加します。

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

Answer 4

ここではクラス名ではなくdata-属性を使用します。

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

この方法では、トリガーの1つをクリックするたびに前の値を上書きします。必要な場合は、CSSセレクタでdata-属性を使用することができます。

#form3[data-selected="lart"] { 
    ... 
}