分配點擊的元素作爲類名ID到另一個元件

我的一個項目，但我寫的代碼工作是真的錯了：分配點擊的元素作爲類名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）。

如果我想要它有兩個對，就像只是用djatht改變lart與posht和majt一樣，順便說一句，這是ids的含義：lart = up posht = down majt = left djatht = right如果我點擊向上按鈕，然後點擊右邊的課程，保持剛剛添加1個稱爲正確的課程，或者離開！或者如果我點擊向下按鈕，那麼我可以改變它的右邊或左邊，但是它會是（下，左/右或上，左/右）這可能嗎？

來源

2012-01-22 Igor Ivanovski

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

來源

2012-01-22 23:46:16

這確實是一種簡潔的方法。不過，它有可能成爲bug的來源，因爲在未來的某個時候很容易在窗體中添加一個類名，而不會意識到當單擊其中一個元素時會消失。 – davidchambers

@davidchambers - 確實如此。用稍微不同的方法更新。 –

@JosephSilber如果我想讓它有兩個對，就像用djatht改變lart與posht和majt一樣，順便說一下，這就是id的含義：lart = up posht = down majt = left djatht = right我點擊向上按鈕，然後點擊右邊的課程，保持剛剛添加1個稱爲正確的課程，或者離開！或者如果我點擊向下按鈕，然後我可以改變向右或向左，但它會（向下和向左/向右或向上和向左/向右） –

不知道爲什麼你躲過了引號，但如果你只是想在一個時間一個類，使用...

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

...而不是addClass。

來源

2012-01-22 23:46:47

已更新：一次只附加一個課程。

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

來源

2012-01-22 23:47:46

而不是使用'。click（）'然後'unbind'，使用[jQuery的'.one（）']（http://api.jquery.com/one/）。 –

我在重讀這個問題後更新了，但是感謝'.one（）'引用。 –

@Matt LO它做了同樣的工作，點擊全部後添加了所有這些類。但我想爲每個ID添加一個點擊，例如，如果我單擊＃lart id lart類將被添加，然後如果我單擊#posht id posht類將被添加和以前的類（拉爾特）將被刪除 –

我會在這裏使用data-屬性而不是類名。

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

這樣，每次單擊其中一個觸發器時，就會覆蓋以前的值。如有必要，您可以使用CSS選擇器中的data-屬性：

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

來源

2012-01-22 23:51:45 davidchambers

分配點擊的元素作爲類名ID到另一個元件

回答

相關問題