Форум

bes · #11 (**permalink**) 25.06.2012, 17:06

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

<ul id="myList">
  <li>red</li>
  <li>green</li>
  <li>blue</li>
</ul>

<script>
window.onload = function() {
  var span = document.getElementById('mySpan');
  var list = document.getElementById('myList');
  var len = list.children.length;
  for (var i = 0; i < len; i++) {
    list.children[i].style.background = list.children[i].innerHTML;
  }

  list.onmouseover = function (e) {
    e = e || event;
    var target = e.target || e.srcElement;
    span.innerHTML = target.innerHTML;
    span.style.color = target.style.backgroundColor;
  }

  list.onmouseout = function () {
    span.innerHTML = 'text';
    span.style.color = 'black';
  }

}
</script>

Vampir3 · #12 (**permalink**) 25.06.2012, 18:26

пробую, спасибо

Мишка · #13 (**permalink**) 26.06.2012, 14:55

Сообщение от Dim@

Мишка,
учитесь? в качестве заметки лучше используйте функцию с аргументами (если не поняли то вот пример:

<li onMouseOver="izm(this, '#300')">lll</li>
<li onMouseOver="izm(this, '#040')">lll</li>
<li onMouseOver="izm(this, '#004')">lll</li>
<script>
function izm(th, cvet){
 th.style.color = cvet;
 th.innerHTML = cvet;
}
</script>

)

ну с функцией всё ясно.

вы, уважаемый, меня никак не поймете.
мне нужно менять не свойства и текст текущего элемента, а например (даже не например, а конкретно) всех элементов на странице у которых класс "text1".
т.е. навожу мышой или тычу оной на определенный элемент, а скрипт мне на всей моей большой странице содержимое всех спанов с классом "текст1" меняет на "траляля", а для спана с классом "текст2" менят колор фонта на, к примеру, #d23

может есть что почитать(более локализованное в плане описания, но достаточно доступное) по поводу того к чему может обращаться яваскрипт, т.е. например по айди или document. и т.д.

все примеры что вы приводили рабочие, но под себя не получается изменить.. находил что то в инете с использованием жквери, но тоже слегка не то и уже очень сложно разобраться имея нулевой уровень в яве.

ksa · #14 (**permalink**) 26.06.2012, 15:05

Сообщение от Мишка

навожу мышой или тычу оной на определенный элемент, а скрипт мне на всей моей большой странице содержимое всех спанов с классом "текст1" меняет на "траляля", а для спана с классом "текст2" менят колор фонта на, к примеру, #d23

Пора бы от смутных описаний перейти к созданию тестового примера...
Вот на нем и можно будет показать как и чего.

ksa · #15 (**permalink**) 26.06.2012, 15:12

Сообщение от Мишка

навожу мышой или тычу оной на определенный элемент, а скрипт мне на всей моей большой странице содержимое всех спанов с классом "текст1" меняет на "траляля", а для спана с классом "текст2" менят колор фонта на, к примеру, #d23

Вот прям как просил!

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
</style>
<script type="text/javascript">
$(document).ready(function (){
	$('button').click(function (){
		$('.text1').text('траляля');
		$('.text2').css('background-color','#d23');
	});
});
</script>
</head>
<body>
<button>Тыч сюда</button>
<span class='text1'>text1</span>
<span class='text2'>text2</span>
<span class='text2'>text2</span>
<span class='text1'>text1</span>
</body>
</html>

Мишка · #16 (**permalink**) 26.06.2012, 15:23

да я вроде писал пример.
вот рабочий вариант:

<div class="text_mod">
первый спан (цвет<span id="text1">просто текст</span>)
второй спан (<span id="text2" style="color: red; font-weight: normal;">ЦВЕТ :з)</span>)
<br />
<div style="height:50px;">
<ul style="width: 100px;">
<li onMouseOver="text1.innerHTML='#300'; text2.style.color='#300';" style="background: #300"></li>
<li onMouseOver="text1.innerHTML='#400'; text2.style.color='#400';" style="background: #400"></li>
<li onMouseOver="text1.innerHTML='#500'; text2.style.color='#500';" style="background: #500"></li>
<li onMouseOver="text1.innerHTML='#600'; text2.style.color='#600';" style="background: #600"></li>
<li onMouseOver="text1.innerHTML='#700'; text2.style.color='#700';" style="background: #700"></li>
<li onMouseOver="text1.innerHTML='#800'; text2.style.color='#800';" style="background: #800"></li>
<li onMouseOver="text1.innerHTML='#900'; text2.style.color='#900';" style="background: #900"></li>
<li onMouseOver="text1.innerHTML='#a00'; text2.style.color='#a00';" style="background: #a00"></li>
<li onMouseOver="text1.innerHTML='#b00'; text2.style.color='#b00';" style="background: #b00"></li>
<li onMouseOver="text1.innerHTML='#c00'; text2.style.color='#c00';" style="background: #c00"></li>
<li onMouseOver="text1.innerHTML='#d00'; text2.style.color='#d00';" style="background: #d00"></li>
<li onMouseOver="text1.innerHTML='#e00'; text2.style.color='#e00';" style="background: #e00"></li>
<li onMouseOver="text1.innerHTML='#f00'; text2.style.color='#f00';" style="background: #f00"></li>
</ul>
</div>

а здесь как мне надо, но т.к. использую айди, а не класс - всё перестает работать:

<div class="text_mod">
первый спан (цвет<span id="text1">просто текст</span>)
второй спан (<span id="text2" style="color: red; font-weight: normal;">ЦВЕТ :з)</span>)
а это добавочные которые тоже должны меняться на те же что и первый спан - (цвет<span id="text1">просто текст</span>)
<br />
<div style="height:50px;">
<ul style="width: 100px;">
<li onMouseOver="text1.innerHTML='#300'; text2.style.color='#300';" style="background: #300"></li>
<li onMouseOver="text1.innerHTML='#400'; text2.style.color='#400';" style="background: #400"></li>
<li onMouseOver="text1.innerHTML='#500'; text2.style.color='#500';" style="background: #500"></li>
<li onMouseOver="text1.innerHTML='#600'; text2.style.color='#600';" style="background: #600"></li>
<li onMouseOver="text1.innerHTML='#700'; text2.style.color='#700';" style="background: #700"></li>
<li onMouseOver="text1.innerHTML='#800'; text2.style.color='#800';" style="background: #800"></li>
<li onMouseOver="text1.innerHTML='#900'; text2.style.color='#900';" style="background: #900"></li>
<li onMouseOver="text1.innerHTML='#a00'; text2.style.color='#a00';" style="background: #a00"></li>
<li onMouseOver="text1.innerHTML='#b00'; text2.style.color='#b00';" style="background: #b00"></li>
<li onMouseOver="text1.innerHTML='#c00'; text2.style.color='#c00';" style="background: #c00"></li>
<li onMouseOver="text1.innerHTML='#d00'; text2.style.color='#d00';" style="background: #d00"></li>
<li onMouseOver="text1.innerHTML='#e00'; text2.style.color='#e00';" style="background: #e00"></li>
<li onMouseOver="text1.innerHTML='#f00'; text2.style.color='#f00';" style="background: #f00"></li>
</ul>
</div>

как видно если добавляется доп айди слова "простой текст не меняются" а должны меняться на одно и тоже (ох.. чую запутал я еще больше вас)

Мишка · #17 (**permalink**) 26.06.2012, 15:25

ksa,
не успел

сейчас поразбираю ваш код!

Мишка · #18 (**permalink**) 26.06.2012, 16:12

Сообщение от ksa

Вот прям как просил!

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
</style>
<script type="text/javascript">
$(document).ready(function (){
	$('button').click(function (){
		$('.text1').text('траляля');
		$('.text2').css('background-color','#d23');
	});
});
</script>
</head>
<body>
<button>Тыч сюда</button>
<span class='text1'>text1</span>
<span class='text2'>text2</span>
<span class='text2'>text2</span>
<span class='text1'>text1</span>
</body>
</html>

а как эту функцию вызывать с определенными параметрами? и, допустим, из онмаусовер.

если не сложно напишите комменты к строкам скрипта.
я не понимаю как он работает.

вот мой нерабочий. поскольку языка не знаю - естественно не понимаю почему не работает.

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ Без Имени</title>
<script type="text/javascript">
function izm(col){('document.text1').text(col);
		$('document.text2').css('color', col);
	}
</script>
</head>
<body>
<li onclick="izm('#0f0')" style="background: #f00">ad</li>
<span class='text1'>text1</span>
<span class='text2'>text2</span>
<span class='text2'>text2</span>
<span class='text1'>text1</span>
</body>

Мишка · #19 (**permalink**) 26.06.2012, 16:14

почему нельзя использовать вместо айди - класс? во втором примере поста #16

ksa · #20 (**permalink**) 26.06.2012, 16:41

Мишка, я так понимаю аппетиты растут!

1000р на телефон и продолжаем консультацию...

Форум

Справочник

Discord чат

Курсы javascript