Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   изменение цвета фона где совпадает цифра (https://javascript.ru/forum/misc/46425-izmenenie-cveta-fona-gde-sovpadaet-cifra.html)

djonA 09.04.2014 14:24

изменение цвета фона где совпадает цифра
 
Подскажите, необходимо изменить цвет фона div'a где цифра соответствует цифре в input'e.
Т.е есть:

<div class="">1</div>
<div class="">2</div>
<div class="">3</div>

и есть <input type="text" value="">

надо что бы когда в input писал цифру 1 то скриптом во всех div'aх где цисло 1 задний фон менялся на красный


Пытаюсь сделать jquery. Но не получается. Подскажите плиз

ksa 09.04.2014 15:13

Цитата:

Сообщение от djonA
Пытаюсь сделать jquery. Но не получается.

Где примеры тех попыток?

djonA 09.04.2014 15:25

у меня получилось проверить на соответствие только для чисел т.е:
<input type="text" id="a" value="2">
<input type="text" id="b" onkeyup="document.getElementById('result').innerHTML = (parseFloat(document.getElementById('a').value)||0) - (parseFloat(this.value)||0)">
    <div id="result"></div>


ну а дальше думал сделать если ноль то окрасить фон в цвет.

Но думаю это не совсем правильно а правильнее именно проверять на соответствие что бы если input равен div'у задать в этом div'e красный фон

djonA 09.04.2014 15:49

Вот сделал вот так:
<script type="text/javascript" src="http://yandex.st/jquery/1.7.2/jquery.min.js"></script>
	<script>
	  $(document).ready(function(){
	    $(".data-tst").each(function () {
	      var dat=$(this).text().split('.');
	     

тут как пытаюсь проверить если dat равно text то сделать фон красный, но не получается
	    });
	  });
	</script>


<div class="data-tst">
<span>1</span></div>
<div class="data-tst">
<span>2</span></div>
<div class="data-tst">
<span>3</span></div>

<input id="text" type="text" value="">

djonA 09.04.2014 16:03

вот так не срабатывает:
<script type="text/javascript" src="http://yandex.st/jquery/1.7.2/jquery.min.js"></script>
	<script>
	  $(document).ready(function(){
	    $(".data-tst").each(function () {
	      var dat=$(this).text().split(',');
	   
	       if(dat="2")$(this).css({"background-color":"red"});
	
	    });
	  });
	</script>
<div class="data-tst">
<span>1</span></div>
<div class="data-tst">
<span>2</span></div>
<div class="data-tst">
<span>3</span></div>

рони 09.04.2014 16:12

Цитата:

Сообщение от djonA
dat="2")

это что?

jsnb 09.04.2014 16:14

Цитата:

Сообщение от djonA (Сообщение 306952)
var dat=$(this).text().split(',');

А это зачем?

djonA 09.04.2014 16:15

я пытаюсь проверить что бы везде где
<div class="data-tst"><span>2</span></div>

задний фон окрасился в красный цвет

рони 09.04.2014 16:16

djonA,
<script type="text/javascript" src="http://yandex.st/jquery/1.7.2/jquery.min.js"></script>
	<script>
	  $(function(){
	    $(".data-tst:contains('2')").css({"background-color":"red"})
	  });
	</script>
<div class="data-tst">
<span>1</span></div>
<div class="data-tst">
<span>2</span></div>
<div class="data-tst">
<span>3</span></div>

djonA 09.04.2014 16:45

спасибо большое то что нужно, только подскажите как вводить число 1 или 2 или 3 из
<input type="text" value="" id="text">


пробую так что то не срабатывает:
<script type="text/javascript" src="http://yandex.st/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function(){
var a=document.getElementById(text).value
$(".data-tst:contains(a)").css({"background-color":"red"})
});
</script>
<div class="data-tst">
<span>1</span></div>
<div class="data-tst">
<span>2</span></div>
<div class="data-tst">
<span>3</span></div>

<input type="text" value="" id="text">


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