HINZUFÜGEN und ENTFERNEN Knopf Funktion in jquery

Question

Ich möchte Funktion für beide hinzufügen und entfernen in einer einzigen Taste.

Standard der innere Text ist nur nach einem Klick auf die Schaltfläche auswählen sollte es "Remove" ersetzt werden. Es sollte Toggle-Funktion wie sein. Bitte geben Sie an, wie Sie vorgehen können.

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

Wie @JasperZelf erwähnt - diese Sequenz scheint falsch - aber im Interesse der Beantwortung, was Sie haben gefragt nach - Ich habe meine Antwort so geändert, dass der Klick auf die Schaltfläche zwischen den drei Zuständen wechselt (Auswählen/Auswählen/Entfernen)). Dies geschieht durch Anwenden eines inkrementierenden Werts auf die Schaltfläche und anschließendes Verwenden des Modulo-Operators, um den Wert aus einem Array der drei Optionen zu bestimmen und dann diesen als Text der Schaltfläche anzuwenden.

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

Wie OP in @gavgrifs Antwort kommentiert, will er die Schaltfläche Textfolge werden: wählen - ausgewählt - löschen. Hört sich nicht logisch an, aber der folgende Code vereinfacht dies und bietet genügend Platz für alle zusätzlichen Aktionen, die Sie bei jedem Klick auf die Schaltfläche ausführen müssen.

Zusätzlicher Vorteil ist, dass Sie jedem Knopfstil leicht unterschiedliche Stile hinzufügen können. Zum Beispiel mache das Löschen rot.

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