jQuery динамическая кнопка toggle

Question

Использование jQuery, я пытаюсь сделать быстрый & грязный способ изменения текста innerHtml кнопки управления (#ctrlBtn), чтобы отразить состояние divToggle() с помощью метода html(). Кажется, я не могу об этом подумать. Он изменяет текст кнопки на 1 клик, но потом это все ... вот код:

<script type="text/javascript"> 
     $(document).ready(function(){ 
     $("#StatsDetail").slideToggle(); //hide it to start 
     $("button").click(function(){ 
      $("#StatsDetail").slideToggle(); //show/hide 
      // the next line is not working even w/standard if/else syntax... 
      ($("#ctrlBtn").html!="Hide") ? $("#ctrlBtn").html("Hide") : "#ctrlBtn").html("View"); 
     }); //end-onClick 
     }); //end-onLoad 
</script> 
<span class="right"><button><div id="ctrlBtn">View/Hide Details</div></button></span> 
<div id="StatsDetail"> Lorem ipsum yadda yadda blah </div> 

ив даже попытался

if ($("#statsDetail").is(":visible")) { 
    $("#ctrlBtn").html("Hide"); 
} else { 
    $("#ctrlBtn").html("View"); 
} 

Я знаю, что я должен быть что-то действительно глупое отсутствует. Любая помощь будет оценена по достоинству.

Джо Negron ~ NYC

Answer 1

Я дам этот выстрел:

var ctrlBtn = $("#ctrlBtn"); 
var statsDetail = $("#StatsDetail"); 

statsDetail.hide(); //hide it to start 

ctrlBtn.click(function(){ 
    statsDetail.slideToggle(); 
    ctrlBtn.text(((ctrlBtn.text() === 'Hide') ? 'View' : 'Hide')); 
}); 

вещь вы хотели бы принять к сведению:

• всегда кэшировать объекты JQuery, потому что создание новых каждый раз, когда вам нужно изменить собственность, дорого.
• Используйте hide(), когда вы пытаетесь что-то скрыть. Мало того, что сразу видно, что вы делаете, вы также избегаете анимации, которая приходит со скользящим эффектом (альтернативно, если вы do означает иметь анимацию, то используйте slideUp())
• Ваш тернарный оператор вас сбивает с толку , Ваши скобки не сбалансированы.
• Я также прекратил бы помещать div в button - это недопустимый HTML. Поместите id на button вместо этого, и использовать display: inline-block

Answer 2

Это будет делать то, что вы хотите использовать функцию обратного вызова после того, как слайд-анимация закончена:

$("button").click(function() { 
    $("#StatsDetail").slideToggle(function() { 
     $('#ctrlBtn').text($(this).is(':visible')? 'hide' : 'show'); 
    }); 
}); 

Как это работает это, выполнив определенные функция обратного вызова после завершения режима slideToggle на #StatsDetail. Затем он проверяет, отображается ли #StatsDetail и соответственно устанавливает кнопку text().

Вы можете увидеть его in action here.