Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Как проще реализовать код (https://javascript.ru/forum/dom-window/29984-kak-proshhe-realizovat-kod.html)

4el 20.07.2012 00:56
Как проще реализовать код
 
такой код

function cb1(){
document.getElementById("s1").style.display = "none";
document.getElementById("s2").style.display = "block";	
document.getElementById('ChangeBox1').style.cssText = 'background: #FF6600; color: #FFFFFF';
document.getElementById('ChangeBox2').style.cssText = 'background: #FFFFFF; color: #FF6600';


}

function cb2(){
document.getElementById("s2").style.display = "none";
document.getElementById("s1").style.display = "block";

document.getElementById('ChangeBox2').style.cssText = 'background: #FF6600; color: #FFFFFF';
document.getElementById('ChangeBox1').style.cssText = 'background: #FFFFFF; color: #FF6600';
}


можно ли его записать как то проще?

Deff 20.07.2012 01:20
4el,
Мон создать два пустых элемента style c id и втыкать туда строку заготовленную строку css
<style id="Style-1"></style>
<style id="Style-2"></style>

<script type="text/javascript">
var a1='#s1{display:none}#s2{display:block}#ChangeBox1:content{background: #FF6600; color: #FFFFFF}'
document.getElementById("Style-1").innerHTML = a1
</script>


Второй недописал

Aetae 20.07.2012 01:21
Можно. Но по хорошему и html поправить не помешало бы. Скорее всего лишние id'шники и элементы используются.

Цитата:
Сообщение от Deff (Сообщение 190117)
4el,
Мон создать два пустых элемента style c id и втыкать туда строку заготовленную строку css
You are doing it wrong.

В готовом css два класса, которые навешиваются родителю, примерно так но можно проще:
.showFirst #s1 {display:none;}
.showFirst #ChangeBox1{background: #F60; color: #FFF}
.showFirst #ChangeBox2{background: #FFF; color: #F60}

.showNext #s2 {display:none;}
.showNext #ChangeBox2{background: #F60; color: #FFF}
.showNext #ChangeBox1{background: #FFF; color: #F60}

Deff 20.07.2012 01:28
Цитата:
Сообщение от Aetae
В готовом css два класса, которые навешиваются родителю, примерно так но можно проще:
Согласен (сплю уже) - стандарная метода
<style type="text/css">
#s1.showFirst1 {display:none;}
#s2.showFirst1 {display:block;}
#ChangeBox2.showFirst1 {background: #F60; color: #FFF}
#ChangeBox1.showFirst1 {background: #FFF; color: #F60}

#s1.showFirst2 {display:block;}
#s2.showFirst2 {display:none;}
#ChangeBox2.showFirst2 {background: #FFF; color: #F60}
#ChangeBox1.showFirst2 {background: #F60; color: #FFF}
</style>

4el 20.07.2012 12:29
Тут смысл в том, что когда я нажимаю на кнопку cb1() поле 2 скрывается, и вместо него появляется поле 1. по умолчанию поле 1 скрыто. Вообще это переключение между поисками по сайту и магазину, с подкраской активного.

Мне интересно - можно ли, к этой кнопке, корректно прикрутить переключение класса стиля..

Deff 20.07.2012 13:33 
<style type="text/css">
#s1.showFirst1 {display:none;}
#s2.showFirst1 {display:block;}
#ChangeBox2.showFirst1 {background: #F60; color: #FFF}
#ChangeBox1.showFirst1 {background: #FFF; color: #F60}

#s1.showFirst2 {display:block;}
#s2.showFirst2 {display:none;}
#ChangeBox2.showFirst2 {background: #FFF; color: #F60}
#ChangeBox1.showFirst2 {background: #F60; color: #FFF}
</style>


<script type="text/javascript">
function cb1(){
document.getElementById("s2").setAttribute('class', 'showFirst1');
document.getElementById("s1").setAttribute('class', 'showFirst1');

document.getElementById('ChangeBox2').setAttribute('class', 'showFirst1');
document.getElementById('ChangeBox1').setAttribute('class', 'showFirst1');
}

function cb2(){
document.getElementById("s2").setAttribute('class', 'showFirst2');
document.getElementById("s1").setAttribute('class', 'showFirst2');

document.getElementById('ChangeBox2').setAttribute('class', 'showFirst2');
document.getElementById('ChangeBox1').setAttribute('class', 'showFirst2');
}
</script>

Aetae 21.07.2012 02:29
Цитата:
Сообщение от Deff (Сообщение 190256) 
<style type="text/css">
#s1.showFirst1 {display:none;}
#s2.showFirst1 {display:block;}
#ChangeBox2.showFirst1 {background: #F60; color: #FFF}
#ChangeBox1.showFirst1 {background: #FFF; color: #F60}

#s1.showFirst2 {display:block;}
#s2.showFirst2 {display:none;}
#ChangeBox2.showFirst2 {background: #FFF; color: #F60}
#ChangeBox1.showFirst2 {background: #F60; color: #FFF}
</style>


<script type="text/javascript">
function cb1(){
document.getElementById("s2").setAttribute('class', 'showFirst1');
document.getElementById("s1").setAttribute('class', 'showFirst1');

document.getElementById('ChangeBox2').setAttribute('class', 'showFirst1');
document.getElementById('ChangeBox1').setAttribute('class', 'showFirst1');
}

function cb2(){
document.getElementById("s2").setAttribute('class', 'showFirst2');
document.getElementById("s1").setAttribute('class', 'showFirst2');

document.getElementById('ChangeBox2').setAttribute('class', 'showFirst2');
document.getElementById('ChangeBox1').setAttribute('class', 'showFirst2');
}
</script>



<style type="text/css">
.showFirst #s1 {display:none;}
.showFirst #ChangeBox1{background: #F60; color: #FFF}
.showFirst #ChangeBox2{background: #FFF; color: #F60}
 
.showNext #s2 {display:none;}
.showNext #ChangeBox2{background: #F60; color: #FFF}
.showNext #ChangeBox1{background: #FFF; color: #F60}
</style>

<script type="text/javascript">
var parent = document.body; //желательно ближайший общий предок
function cb(){
    parent.className = parent.className === 'showNext' ?  'showFirst' :  'showNext';
}
</script>

Deff 21.07.2012 02:44
Aetae,
Нет шобы радовацо - что учит молодую поросль, воть всё бы ругацо да фейси - пальмить!

В Вашем решении есть и минусы - посколь чел не показывает что было при дефолтном положении вещей... возможны варианты - когда часть установок могут иметь характеристики из первой и второй серии :write:
Лепше своять двухстрочную функцию установки класса и задать массив на вход, нежели жертвовать независимой установкой каждого элемента

Aetae 21.07.2012 03:05
Он просил сократить код, а вы его увелиили. Причём абсолютно бессмыслено и крайне некрасиво. Каждый раз, как на него смотрю, пальма сама к фейсу тянется.

Deff 21.07.2012 03:12
Aetae,
Лан - Решать в конце концов ТС

<style type="text/css">
#s1.showFirst1 {display:none;}
#s2.showFirst1 {display:block;}
#ChangeBox2.showFirst1 {background: #F60; color: #FFF}
#ChangeBox1.showFirst1 {background: #FFF; color: #F60}

#s1.showFirst2 {display:block;}
#s2.showFirst2 {display:none;}
#ChangeBox2.showFirst2 {background: #FFF; color: #F60}
#ChangeBox1.showFirst2 {background: #F60; color: #FFF}
</style>


<script type="text/javascript">

var arrById='s2,s1,ChangeBox2,ChangeBox1';arrById = arrById.split(',');

function changClass(Class){
  for(var i in arrById) document.getElementById(arrById[i]).setAttribute('class',Class);
}

(function (){var a=0;
  toggleClass = function (){changClass('showFirst'+(1+a%2));a++;} 
  return toggleClass;
} () )

</script>

Dim@ 21.07.2012 12:10
Цитата:
Сообщение от Deff (Сообщение 190413)
Aetae,
Нет шобы радовацо - что учит молодую поросль, воть всё бы ругацо да фейси - пальмить!
иногда скучно бывает на форуме - и хочется руганий, дебатов, фейспалмов:dance:

4el 22.07.2012 00:05
Всё здорово, всё работает, всем спасибо.


Часовой пояс GMT +3, время: 08:50.