Применить/Удалить Css на кнопке

При нажатии кнопки «Показать/скрыть отправку» кнопку «Отправить» необходимо отобразить и скрыть. Мой код работает, но есть лучший способ сделать это [одна часть Javascript]Применить/Удалить Css на кнопке

<style type="text/css"> 
    .displayNone{ 
     display : none; 
    } 
    </style> 



    <button id="sub" >Submit</button> 
    <button id="control">Show/Hide Submit</button> 

    <script type="text/javascript"> 

    $(document).ready(function() { 
     $("#control").click(function(){ 
     if($("#sub").attr("class") == "displayNone"){ 
      $("#sub").attr("class","") 
     } 
     else{ 
      $("#sub").attr("class","displayNone") 
     } 

     }); 
    }); 
    </script>

источник

2016-01-25 Anonymous

@ShriyaR что вы сделали? – Jai

@ShriyaR, возможно, вы пропустили читать _is там лучший способ сделать это – Jai

Надеется, что вы не в курсе .toggleClass() предопределенного метода :) Попробуйте следующий код

$(document).ready(function() { 
    $("#control").click(function(){ 
    $("#sub").toggleClass("displayNone"); 
    }); 
});

источник

2016-01-25 12:23:40 Nofi

Перефразировать _Надеюсь, что вы не знаете о_ – Satpal

Вы можете использовать метод в JQuery в toggle, чтобы отобразить или скрыть #sub кнопку:

$(function() { 
    $("#control").click(function(){ 
     $("#sub").toggle(); 
    }); 
});

При вызове без аргументов, этот метод просто отображает или час ides, то есть переключает текущее состояние видимости элементов.

источник

2016-01-25 12:28:26

Я думаю, вам нужно упомянуть, как он ведет себя без аргументов/опций. – Rayon

Он просто отображает или скрывает согласованные элементы, т.е. переключает текущее состояние видимости элементов. Дополнительные опции могут использоваться для указания анимаций и обратных вызовов. Для получения дополнительной информации см. Документацию (гиперссылка в моем ответе) –

Я знаю об этом, но многих нет. Это сделало бы ваш ответ более полезным .. – Rayon

Как можно улучшение @ ответ NOFI, вы могли бы кэшировать «#sub» объект JQuery между щелчками :) (Это экономит того, чтобы найти элемент каждый раз)

$(document).ready(function() { 
    var $sub = $('#sub'); 
    $("#control").click(function(){ 
     $sub.toggleClass("displayNone"); 
    }); 
});

источник

2016-01-25 12:30:41

Если вам нужно только выбрать его 1 раз, то с использованием переменной перебор: P – NachoDawg

_better, чем @ Ответ Nofi _.... ..действительно!!! – Jai

@NachoDawg Мне нравится подавать свои формы 5 раз, D Нет, серьезно, я думаю, что это хорошая практика, так что вы можете также ... –

<html> 
<head> 
<script src="http://code.jquery.com/jquery-1.10.2.js"></script> 
<style type="text/css"> 
    .displayNone{ 
     display : none; 
    } 
    </style> 
<script> 

    $(document).ready(function() { 
     $("#control").click(function() { 
      $('#sub').toggleClass("displayNone"); 

     }); 
    }); 
</script> 
</head> 
<body> 
<button id="sub" >Submit</button> 
    <button id="control">Show/Hide Submit</button> 

</body> 
</html>

источник

2016-01-25 12:31:22 Aswathy

худший ответ в потоке, я бы сказал ..... :( – Jai

лучше удалить этот ответ, то, как вы публикуете, неприемлемо. другие ответы, чтобы узнать или взять тур, чтобы найти, как ответить. – Jai

Просто собирается предложить решение, которое отличается от буквально все вернулись на Родину

$(document).ready(function() { 
    var $sub = $('#sub'); 

    $("#control").click(function(){ 
     $sub.attr("class") == "displayNone" ? 
     $sub.attr("class","") : $sub.attr("class","displayNone") 
    }) 
});

Да, вы можете использовать toggle() или toggleClass(), но если есть другая точка вниз линии, чтобы проверить #sub имеет этот класс или нет, то возможно ?: - это «лучшее» решение?

источник

2016-01-25 12:42:02 NachoDawg

Вы можете попробовать fadeIn и fadeOut слишком Demo here

$(document).ready(function() { 
     $("#control").click(function() { 

     if($("#control").hasClass("yoyo")) 
     { 
     $('#sub').fadeIn(700); 
      $("#control").removeClass("yoyo"); 

     } 
     else 
     { 
     $('#sub').fadeOut(700); 
      $("#control").addClass("yoyo"); 

     } 


     }); 
    });

источник

2016-01-25 12:50:51

Применить/Удалить Css на кнопке

ответ

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