Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.07.2012, 00:56
4el 4el вне форума
Новичок на форуме
Отправить личное сообщение для 4el Посмотреть профиль Найти все сообщения от 4el
 
Регистрация: 20.07.2012
Сообщений: 3

Как проще реализовать код
такой код

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';
}


можно ли его записать как то проще?
Ответить с цитированием
  #2 (permalink)  
Старый 20.07.2012, 01:20
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

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>


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

Последний раз редактировалось Deff, 20.07.2012 в 01:26.
Ответить с цитированием
  #3 (permalink)  
Старый 20.07.2012, 01:21
Аватар для Aetae
Любитель
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 5,699

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

Сообщение от Deff Посмотреть сообщение
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}
__________________
29375, 35

Последний раз редактировалось Aetae, 20.07.2012 в 01:27.
Ответить с цитированием
  #4 (permalink)  
Старый 20.07.2012, 01:28
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Сообщение от 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>

Последний раз редактировалось Deff, 20.07.2012 в 02:22.
Ответить с цитированием
  #5 (permalink)  
Старый 20.07.2012, 12:29
4el 4el вне форума
Новичок на форуме
Отправить личное сообщение для 4el Посмотреть профиль Найти все сообщения от 4el
 
Регистрация: 20.07.2012
Сообщений: 3

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

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

Последний раз редактировалось 4el, 20.07.2012 в 12:38.
Ответить с цитированием
  #6 (permalink)  
Старый 20.07.2012, 13:33
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

<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>
Ответить с цитированием
  #7 (permalink)  
Старый 21.07.2012, 02:29
Аватар для Aetae
Любитель
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 5,699

Сообщение от Deff Посмотреть сообщение
<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>
__________________
29375, 35
Ответить с цитированием
  #8 (permalink)  
Старый 21.07.2012, 02:44
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

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

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

Последний раз редактировалось Deff, 21.07.2012 в 02:46.
Ответить с цитированием
  #9 (permalink)  
Старый 21.07.2012, 03:05
Аватар для Aetae
Любитель
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 5,699

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

Последний раз редактировалось Aetae, 21.07.2012 в 03:07.
Ответить с цитированием
  #10 (permalink)  
Старый 21.07.2012, 03:12
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

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>

Последний раз редактировалось Deff, 21.07.2012 в 13:04.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как это реализовать на JS Bezlyj Общие вопросы Javascript 6 06.03.2012 08:20
Как вывести переменную из javascript в html код? red-nicolas Элементы интерфейса 3 25.02.2012 12:27
Как передать код html страницы из фрейма на сервер vuler Общие вопросы Javascript 5 20.02.2012 15:31
Как реализовать отключения JS кода через админку ? lamer Серверные языки и технологии 4 08.02.2012 16:23