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>