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中回答的那样，他希望按钮文本序列为：select - selected - delete。听起来不合逻辑，但是下面的代码符合这一点，并且有足够的空间来执行每次单击按钮时需要采取的额外操作。

增加的优势是您可以为每种按钮样式添加略微不同的样式。例如，将删除设为红色。

$(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>

在jquery中添加和删除按钮功能

2 个答案: