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

Question

我想在一個按鈕中同時為添加和刪除創建功能。

默認情況下，僅在單擊按鈕后才選擇內部文本，應將其替換為“刪除”。 應該像切換功能一樣。 請告知如何繼續。

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>