Помогите с условием

JastinB · February 13, 2012

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

В качестве примера

$('td.marker').live("click", function(){
if($(this).css('background-color')== '#fff')
{
$(this).css('background-color','#ff0000');
}
else
{
$(this).css('background-color','#0000ff');
}

И ещё вопрос как можно вызвать изменения класса не у данного элемента а у елемента который является его родителем (строку таблицы (<tr>) )

Edited February 13, 2012 by JastinB

safiullin.at · February 13, 2012

$('td.marker').click(function(){
    var color = ($(this).css('background-color') == '#FFF') ? '#FF0000' : '#0000FF';
    $(this).css({'background-color' : color});
});

Как-то так... Не проверял, но должно работать.

Для того, чтобы с к родителю обратиться, используйте $('td.marker').parent()

sigma77 · February 13, 2012

JastinB,

Разные браузеры возвращают цвет в разном формате.

JastinB · February 14, 2012

$('td.marker').click(function(){
    var color = ($(this).css('background-color') == '#FFF') ? '#FF0000' : '#0000FF';
    $(this).css({'background-color' : color});
});
Как-то так... Не проверял, но должно работать.
Для того, чтобы с к родителю обратиться, используйте $('td.marker').parent()

Работает только так

$('td.marker').live("click", function(){
    var color = ($(this).css('background-color') == '#FFF') ? '#FF0000' : '#0000FF';
    $(this).css({'background-color' : color});
});

Но я не правильно задал условие, точнее не правильно выбрал путь реализации. Может подскажите как сделать так чтобы при клике на ячейку таблицы фон родителя (<tr>) менялся например на синий а при ешё одном клиике синий менялся на тот что был до этого.

JastinB,
Разные браузеры возвращают цвет в разном формате.

Не понял как это? одни в хексе другие в числах?

sigma77 · February 14, 2012

Не понял как это? одни в хексе другие в числах?

Да. Одни в хексе (IE), другие в rgb (FF, Opera).

http://jsfiddle.net/GRsTz/

Edited February 14, 2012 by sigma77

JastinB · February 14, 2012

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

http://jsfiddle.net/GRsTz/1/

вот так наглядней думаю будет. Почему не рабоатет?

<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
</head>
<body>
<style type="text/css">
div {
     height: 200px;
     width: 200px;
background: green;    
}
span {
    cursor: pointer;        
}
</style>
<script type="text/javascript">
$('span').toggle(
function() {

    $(this).closest('div').css('background', 'red');
}, function() {
    $(this).closest('div').css('background', 'green');
})
</script>
<div>
    <span>click me</span>
</div>
</body>

Edited February 14, 2012 by JastinB

Burevestnik · February 15, 2012

JS оформите так (вы забыли $(document).ready(function(){......}))

<script type="text/javascript">
$(document).ready(function(){
$("span").toggle(function() {
    $(this).closest('div').css('background', 'red');
}, function() {
    $(this).closest('div').css('background', 'green');
});
})
</script>

Edited February 15, 2012 by Burevestnik

Great Rash · February 15, 2012


$('td.marker').click(function(){
  this.isChange = false;  

  if (!this.isChange) {
    this.style.backgroundColor = '#FF0000';
    this.isChange = true;
  } else {
    this.style.backgroundColor = '#0000FF';
    this.isChange = false;
  }
});

lexxcode · February 15, 2012

А не проще применить .toggleClass, а цвета прописать в css??

Вот так

Sign In

Помогите с условием

Question

JastinB

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

safiullin.at

Link to comment

Share on other sites

sigma77

Link to comment

Share on other sites

JastinB

Link to comment

Share on other sites

sigma77

Link to comment

Share on other sites

JastinB

Link to comment

Share on other sites

Burevestnik

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

lexxcode

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information