изменение видимости диапазона с помощью jquery

Question

Работаю в дурандальном проекте. У меня есть элементы span и button в html. Я хочу показать диапазон нажатием кнопки. моя проблема в том, что когда я скрываю span от html, он не может показать его из javascript. Я видел этот вопрос на вашем сайте (по ссылке change visibility of label tag using jquery), и я попробовал все ответы - все помогло мне.

(я попытался с помощью: в HTML:

<span id="mySpan" hidden = "hidden">aaa</span> 

или:

<span id="mySpan" style= "visibility:collapse">aaa</span> 

или:

<span id="mySpan" style= "diaplay:none">aaa</span> 

в JavaScript:

$("#mySpan").show(); 

или:

$("#mySpan").css('visibility', 'visible'); 

Я попробовал все опциональной комбинации )

Примечание: Я хочу, чтобы вы знали, что, когда я не скрываю промежуток от HTML , и попробуйте использовать toggle(), hide(), show() - он работает хорошо.

пример, который не работает:

на HTML странице:

<span id="mySpan" hidden = "hidden">aaa</span> 

на яваскрипта странице:

$("#mySpan").show(); 

Answer 1

Кажется, ошибка в "diaplay"? Попробуйте изменить:

<span id="mySpan" style="diaplay:none"/>

к:

<span id="mySpan" style="display:none"/>

Answer 2

Ваш HTML не в порядке!

Помните, что промежутки закрыты <span></span> таким образом, а не так, как вы их закрываете! Таким образом, закрываются только самозакрывающиеся элементы, такие как: input, img и т. Д.!

Попробуйте написать это:

<span id="mySpan">Some text!</span> 

CSS-бы:

#mySpan { 
    display: none; // you're using diaplay! 
} 

Теперь с помощью JQuery либо использовать это:

$('#mySpan').show() 

Или это:

$('#mySpan').css('display', 'block'); 

Answer 3

Ну, ваш код - все неправильно.

• Атрибут id должен использоваться только один раз на странице. Он должен быть уникальным, чтобы вы могли ссылаться на него как на одну точку документа. Вы должны изменить его на class="mySpan", а затем выбрать их, используя $(".mySpan").

• visible:collapse недействителен CSS. Вы, вероятно, хотели использовать visibility, да?

• diaplay:none также недействителен CSS. Возможно, опечатка display, да?

• В новейшей спецификации HTML (обычно называемой HTML5) есть атрибут hidden. Я не уверен, знаете ли вы об этом; если вы, и вы пытаетесь использовать его, то вы должны поместить следующий код в файл CSS, так что он работает в браузерах, которые еще не реализованы его:

  *[hidden] { 
      display: none; 
  } 
  

Последующие меры:

Хорошо, вы хотите, чтобы включить или выключить интервал, нажав на кнопку. Это сделают это:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<button id="myButton">Show/hide the span</button><br> 
<span id="mySpan" style="display:none">This is a span with some text in it</span> 
<script> 
$(function() { 
    $("#myButton").click(function() { 
     $("#mySpan").toggle(); 
    }); 
}); 
</script>