在jquery中添加和刪除按鈕功能

Question

我想在一個按鈕中爲ADD和Remove創建函數。

默認的內部文本是隻有一個點擊它應該被替換的按鈕後選擇「刪除」。它應該是切換功能。請告知如何繼續。

的Jquery：

$('.lgi_btn_cta_toggle').on('click', function(){ 
    $(this).html('Selected').attr('id', 'Ctabutton-selected').append("<span class='lgi_btn_cta_toggle-selected'></span>").addClass('tested').addClass('lgi_btn_cta_toggle-selected-hover'); 
}); 

HTML：

<a href="#" target="_top" class="lgi_btn_cta_toggle clearboth tested lgi_btn_cta_toggle-selected-hover" data-upc-tooltip-type="none" title="">Select<span class="lgi_btn_cta_toggle-selected"></span></a> 

CSS：

.lgi_btn_cta_toggle { 
    font-size: 1.125rem; 
    line-height: 1.7rem; 
    height: 44px; 
    padding: 8px 46px; 
} 
.lgi_btn_cta_toggle > span:after { 
    font-size: 14px; 
    width: 13px !important; 
    height: 15px !important; 
    overflow: hidden; 
} 

.lgi_btn_cta_toggle { 
    color: #5a9996; 
    background-color: transparent; 
    border-width: 1px; 
    border-style: solid; 
    border-color: #5a9996; 
} 
.lgi_btn_cta_toggle.disabled, 
.lgi_btn_cta_toggle[disabled] { 
    color: #c2c2c2; 
    background-color: transparent; 
    border-width: 1px; 
    border-style: solid; 
    border-color: #c2c2c2; 
} 
.lgi_btn_cta_toggle:hover, 
.lgi_btn_cta_toggle:focus, 
.lgi_btn_cta_toggle:active { 
    color: #5a9996; 
    background-color: transparent; 
    border-width: 3px; 
    border-style: solid; 
    border-color: #5a9996; 
    line-height: 23px; 
    padding: 8px 44px; 
} 

.lgi_btn_cta_toggle { 
    padding: 8px 46px; 
} 
.tested{ 
padding: 8px 54px 8px 15px !important; 
} 
.tested:hover{ 
padding: 8px 50px 8px 13px !important; 
} 


a span.lgi_btn_cta_toggle-selected { 
    min-width: 43px; 
    height: 45px!important; 
    background: #5a9996; 
    position: absolute; 
    margin-top: -10px; 
    margin-left: 13px; 
    border-top-left-radius: 50px; 
    border-bottom-left-radius: 50px; 
    border-top-right-radius: 18px; 
    border-bottom-right-radius: 18px; 
    padding-top: 10px !important; 
} 
a span.lgi_btn_cta_toggle-selected:focus, span.lgi_btn_cta_toggle-selected:active { 
    min-width: 43px; 
    height: 43px!important; 
    background: #5a9996; 
    position: absolute; 
    margin-top: -10px; 
    margin-left: 13px; 
    border-top-left-radius: 50px; 
    border-bottom-left-radius: 50px; 
    border-top-right-radius: 18px; 
    border-bottom-right-radius: 18px; 
    padding-top: 10px !important; 
} 
a span.lgi_btn_cta_toggle-selected-hover { 
    min-width: 43px; 
    height: 43px !important; 
    background: #5a9996; 
    position: absolute; 
    margin-top: -12px; 
    margin-left: 13px; 
    border-top-left-radius: 50px; 
    border-bottom-left-radius: 50px; 
    border-top-right-radius: 18px; 
    border-bottom-right-radius: 18px; 
    padding-top: 10px !important; 
} 
.lgi_btn_cta_toggle-selected:after { 
    font-family: "MaterialIcons"; 
    content: "\e876"; 
      color: #ffffff; 
      font-weight: bold; 
} 
.lgi_btn_cta_toggle > span:after { 
    font-size: 18px; 
    width: 13px !important; 
    height: 15px !important; 
    overflow: hidden; 
} 

Answer 1

由於@JasperZelf提到 - 這個序列似乎是錯誤的 - 但在回答你有什麼利益問 - 我已經修改了我的答案，以便按鈕單擊切換三種狀態（選擇/選擇/刪除）。這是通過向按鈕應用遞增值，然後使用模運算符來確定三個選項的數組中的值，然後將其作爲按鈕的文本應用。

$(document).ready(function(){ 
 
    var textOptions = ['Select','Selected','Remove']; 
 

 

 
    $('#btnToggle').click(function(){ 
 
    var index = parseInt($(this).val())+1; 
 
    var textOption = textOptions[index % 3]; 
 
    $(this).text(textOption).val(index); 
 
    }) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button type="button" id="btnToggle" value="0">Select</button>

Answer 2

由於OP在@gavgrifs解答發表了評論，他希望可以在按鈕上的文字順序：選擇 - 選擇 - 刪除。 聽起來不合邏輯，但下面的代碼實現了這一點，並有空間做任何你需要對每個按鈕單擊的額外操作。

增加的優點是可以爲每個按鈕樣式添加略微不同的樣式。例如，使刪除紅色。

$(document).ready(function(){ 
 

 
    $('.prodBtn').on('click', function(){ 
 
    if($(this).hasClass('select')){ 
 
     $(this).removeClass('select'); 
 
     $(this).addClass('selected'); 
 
     // do whatever you want on select 
 
    }else if($(this).hasClass('selected')){ 
 
     $(this).removeClass('selected'); 
 
     $(this).addClass('delete'); 
 
     // do whatever you want on selected 
 
    }else if($(this).hasClass('delete')){ 
 
     $(this).removeClass('delete'); 
 
     $(this).addClass('select'); 
 
     // do whatever you want on delete 
 
    } 
 
    }); 
 
    
 
})

.select:before {content: "Select"} 
 
.selected:before {content: "Selected"} 
 
.delete:before {content: "Delete"}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
Using the pseudo classes<br/> 
 
<button type="button" class="prodBtn select"></button><br/> 
 
<button type="button" class="prodBtn select"></button><br/> 
 
<button type="button" class="prodBtn select"></button>