Добрый день всем.
У меня стояла следующая задача: реализовать изменение текста в нескольких блоках при клике по диву или по чекбоксу его дублирующему. При повторном клике - текст менялся обратно, на исходный.
Я совсем не силен в js, честно говоря я его не знаю абсолютно, как и другие языки программирования. Я начинающий верстальщик. Поэтому мое решение было таковым.
Вот див и чекбокс при клике на которые меняется текст в определенных блоках:
<!-- Div -->
<div class="switch-subtitle" id="status-info" onclick="(el = document.getElementById('myonoffswitch')).checked = !el.checked">Не включено</div>
<!-- Chekbox -->
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch">
<label class="onoffswitch-label" for="myonoffswitch">
<div class="onoffswitch-inner"></div>
<div class="onoffswitch-switch"></div>
</label>
</div>
А вот и сам скрипт. Он уродлив, я знаю, но я очень слаб в js:
<script language="JavaScript" type="text/javascript">
$("#myonoffswitch").change(function(){
if($(this).attr("checked")){
$(this).text('Включено');
$("#text1").html('1');
$("#text2").html('2');
$("#text3").html('3');
$("#price1").html('999 <span>руб./мес.</span>');
$("#price2").html('1999 <span>руб./мес.</span>');
$("#price3").html('2499 <span>руб./мес.</span>');
$("#status-info").html('Включено');
}else{
$(this).text('Не включено');
$("#text1").html('Лайт');
$("#text2").html('Оптима');
$("#text3").html('Бизнес');
$("#price1").html('380 <span>руб./мес.</span>');
$("#price2").html('749 <span>руб./мес.</span>');
$("#price3").html('1599 <span>руб./мес.</span>');
$("#status-info").html('Не включено');
}});
</script>
<script>
$("#status-info").toggle(
function () {
$(this).text('Включено');
$("#text1").html('1');
$("#text2").html('2');
$("#text3").html('3');
$("#price1").html('999 <span>руб./мес.</span>');
$("#price2").html('1999 <span>руб./мес.</span>');
$("#price3").html('2499 <span>руб./мес.</span>');
$("#status-info").html('Включено');
},
function () {
$(this).text('Не включено');
$("#text1").html('Лайт');
$("#text2").html('Оптима');
$("#text3").html('Бизнес');
$("#price1").html('380 <span>руб./мес.</span>');
$("#price2").html('749 <span>руб./мес.</span>');
$("#price3").html('1599 <span>руб./мес.</span>');
$("#status-info").html('Не включено');
}
);
</script>
Он работает, но иногда при нажатии на див - для возврата исходного текста - чекбокс и див меняют свои значения, а вот информация в текстовых блоках не меняется. Объясните в чем моя ошибка и если не трудно подскажите, как можно написать скрипт более грамотно. Спасибо.
