Jquery тумблер этикетки кнопка/текст

У меня есть очень простой сценарий тумблер, который прекрасно работает, но я хотел бы, чтобы переключить этикетку, чтобы он показывал показать первый затем скрытьJquery тумблер этикетки кнопка/текст

мой HTML является:

<button type="button" class="show">Show</button> 
<br /> 
<br /> 
<div id="info">#info</div> 
<div id="edit">#edit</div>

и мой JQuery является

$("#edit").hide(); 
$(".show").click(function(){ 
$("#info, #edit").fadeToggle("slow"); 
});

КСС:

#info { 
position:absolute; 
left:0px; 
background-color:green; 
width:100px; 
height:100px; 
} 

#edit { 
position:absolute; 
background-color:red; 
width:100px; 
height:100px; 
}

источник

2016-01-28 Duggy G

Где вы положили код JQuery, вы завернуть его в $ (документ) .ready()? – Stickers

Не уверен, что вы имеете в виду? Содержимое скрыто при первой загрузке, но вы хотите, чтобы оно было скрыто? – Mushr00m

'$ (document) .ready() {alert (« запустите этот код, когда документ полностью загружен »)}'. Если у вас есть код jQuery над элементами html, они еще не существуют, поэтому ваш jQuery не будет выполнен. – Xorifelse

Добавьте эту строку:

$('button').text($('button').text() === 'Show' ? "Hide" : "Show");

Так что ваш JavaScript выглядит следующим образом:

$("#edit").hide(); 
$("show").click(function(){ 
    $("#info, #edit").fadeToggle("slow"); 
    $('button').text($('button').text() === 'Show' ? "Hide" : "Show"); 
});

Эта строка переключает текст кнопки в зависимости от текущего значения.

Кроме того, ваши цветные коробки немного перемещаются при переключении, так как left:0 находится только на одном DIV.

jsFiddle: https://jsfiddle.net/xerbefmg/

источник

2016-01-28 22:00:37

Jquery тумблер этикетки кнопка/текст

ответ

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