更改類按鈕組

我有三個按鈕，每個按鈕都有一個CSS類。點擊其中的一個，我想要移除該類，併爲點擊元素添加一個新的CSS類。此外，我需要繼續按下選定的按鈕。我搜索了一些例子，我發現這是可能做這樣的事情：更改類按鈕組

$(".class").removeClass("choice").addClass("active");

這適用於所有的按鈕，但不是唯一的一個。我試圖改變這在

$(this).removeClass("choice").addClass("active");

但這沒有奏效。

我做更多的compreansion小提琴：https://jsfiddle.net/90u6b3tj/3/

編輯我需要同樣的行爲，當我按下第二次

很抱歉的基本問題。

在此先感謝

問候

來源

2016-03-08 Giordano

刪除'e.preventDefault（）' –

檢查https://jsfiddle.net/90u6b3tj/8/ –

感謝您的重播，但我需要保持按下所選按鈕。無論如何它dosn't工作 – Giordano

我已經更新您的jsfiddle一個有效的解決方案：

https://jsfiddle.net/90u6b3tj/10/

這裏的JavaScript部分：

$(function() { 
    $("button").click(function(e) { 
     e.preventDefault(); 
     $(this).toggleClass("active"); 
    }); 
});

來源

2016-03-08 11:58:40 Artifex404

請注意，這似乎工作的唯一原因是你有'f'而不是關閉;在其中一種CSS樣式中。但是，如果您切換CSS中樣式的順序，它也可以工作。 –

修復了CSS樣式中的結尾分號。 – Artifex404

然後有一個沒有意義的互聯網點。雖然我確實覺得有趣的是，有七個答案可以通過快速CSS更改和編輯一行代碼來解決問題。：P –

你可以請改用以下代碼。

$(".class").click(function(){ 
    $(".class").addClass("choice"); 
    $(".class").removeClass("active"); 
    $(this).removeClass("choice").addClass("active"); 
});

這裏，「選擇」類只從點擊的類中刪除。不是來自其他人。此外，「活動」類被添加到被點擊的類。

來源

2016-03-08 11:58:51

您可以在button標記中使用change(this)，並在change()函數中引用該元素，如fiddle所示。

來源

2016-03-08 11:59:49 Aer0

爲您添加您的單擊事件，如下所示： -

<button id="hourly" class="choice" onclick="change()">Orario</button>

你可以使用event.target： -

function change(){ 
    event.preventDefault(); 
    $(event.target).removeClass("choice").addClass("active"); 
}

OR，改變你的活動，並通過在this： -

<button id="hourly" class="choice" onclick="change(this)">Orario</button>

所以你可以做： -

function change(element){ 
    event.preventDefault(); 
    $(element).removeClass("choice").addClass("active"); 
}

或者更好的是： -

$('.choice').click(function(e){ 
    e.preventDefault(); 
    $(this).removeClass("choice").addClass("active"); 
});

和刪除內聯click事件。

來源

2016-03-08 12:00:06 BenG

function change(event){ 
 
    event.preventDefault(); 
 
    //$(".choice").removeClass("choice").addClass("active"); 
 
    $(event.target).removeClass("choice").addClass("active"); 
 
}

<div> 
 
    <button id="hourly" class="choice" onclick="change(event)">Orario</button> 
 
</div> 
 

 
<div> 
 
    <button id="daily" class="choice" onclick="change(event)">Giornaliero</button> 
 
</div> 
 

 
<div> 
 
    <button id="monthly" class="choice" onclick="change(event)">Mensile</button> 
 
</div>

來源

2016-03-08 12:00:23 saikumar

-1

如果有可能因此選擇多個項目的活躍？如果不是，結賬此：

標記

<div> 
    <button id="hourly" class="choice">Orario</button> 
</div> 

<div> 
    <button id="daily" class="choice">Giornaliero</button> 
</div> 

<div> 
    <button id="monthly" class="choice">Mensile</button> 
</div>

CSS

.active { 
    background-color: #A60076; 
    color: #FF0000; 
} 

.choice { 
    background-color: #000000; 
    color: #FFFFFF; 
}

$(document).ready(function() { 
    $('button').click(function(e) { 
    $("button").addClass('choice').removeClass('active'); 
    $(this).removeClass('choice').addClass('active'); 
    }); 
});

下面是一個樣本fiddle與上面的代碼工作。

來源

2016-03-08 12:10:17 kaito

更改類按鈕組

回答

相關問題