Как переключаться между классами кнопок начальной загрузки onClick?

Я использую кнопки Bootstrap и хотел бы, чтобы они меняли цвет при нажатии. Например, кнопка изначально серая (btn-default) и должна переключаться на зеленый (btn-success) при нажатии. Я бы хотел, чтобы кнопка снова вернулась к классу по умолчанию при повторном нажатии. Пока я создал оператор if и добавил следующий код, однако он только меняет цвет один раз и не будет возвращаться к классу по умолчанию при повторном нажатии.Как переключаться между классами кнопок начальной загрузки onClick?

$("#critical_btn").click(function() { 

    if (this.class= 'btn-default'){ 
     $('#critical_btn').removeClass('btn-default').addClass('btn-success '); 
     $(this).addClass('btn-success').removeClass('btn-default'); 
    } 
    else if (this.class= 'btn-success'){ 
     $('#critical_btn').removeClass('btn-success').addClass('btn-default '); 
     $(this).addClass('btn-default').removeClass('btn-success'); 
    } 
    });

Я довольно новичок в этом, поэтому любая помощь будет принята с благодарностью!

источник

2016-08-25 Sonya Panich

Вместо того, чтобы делать, а если заявление elseif. Если вы хотите переключиться между двумя классами, вы можете использовать $ (селектор) .toggleClass ('firstclass secondclass'), если один из них будет назначен в разметке. (http://api.jquery.com/toggleclass/)

JQuery будет выглядеть следующим образом:

$("#critical_btn").click(function() { 
    $(this).toggleClass('btn-default btn-success'); 
});

Пример:

https://jsfiddle.net/xsotp27s/

источник

2016-08-25 16:15:09

Вы можете использовать hasClass Метод:

$(document).ready(function() { 

    $("#critical_btn").click(function() { 

     if ($(this).hasClass('btn-default')){ 
      $('#critical_btn').removeClass('btn-default').addClass('btn-success'); 
      $(this).addClass('btn-success').removeClass('btn-default'); 
     } 

     else if ($(this).hasClass('btn-success')){ 
      $('#critical_btn').removeClass('btn-success').addClass('btn-default'); 
      $(this).addClass('btn-default').removeClass('btn-success'); 
     } 

    }) 
})

Окончательный код:

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <style> 
 
     .btn-success {background-color: red} 
 
     .btn-default {background-color: blue} 
 
    </style> 
 
</head> 
 
<body> 
 
    <button id="critical_btn" class="btn-default">Button</button> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script> 
 
    $(document).ready(function() { 
 

 
     $("#critical_btn").click(function() { 
 

 
      if ($(this).hasClass('btn-default')){ 
 
       $('#critical_btn').removeClass('btn-default').addClass('btn-success'); 
 
       $(this).addClass('btn-success').removeClass('btn-default'); 
 
      } 
 

 
      else if ($(this).hasClass('btn-success')){ 
 
       $('#critical_btn').removeClass('btn-success').addClass('btn-default'); 
 
       $(this).addClass('btn-default').removeClass('btn-success'); 
 
      } 
 

 
     }) 
 
    }) 
 
    </script> 
 
</body> 
 
</html>

источник

2016-08-25 16:12:55 Ehsan

Просто переключите классы, как это:

$("#critical_btn").click(function() { 
    $(this).toggleClass('btn-default btn-success'); 
});

источник

2016-08-25 16:14:33 Dario

$("#critical_btn").click(function() { $(this).toggleClass("btn-success btn-default"); });

Переключить класс особенность JQuery поможет вам в этом нуждается.

http://api.jquery.com/toggleclass/

источник

2016-08-25 16:16:52 ameenulla0007

Как переключаться между классами кнопок начальной загрузки onClick?

ответ

Смежные вопросы