Изменение цвета фона div с Javascript

У меня есть фотогалерея. Каждая фотография помещается в маленький div. Я хотел сделать эффект, когда я нажимаю на фотографию, чтобы сделать этот красный цвет div, и он уже работает. Но теперь я хочу, чтобы красный цвет цвета снова изменился на белый, когда я снова нажму на него. Было бы какой-то эффект отбора я пытался улучшить мой JS код сам, но я очень плохо в нем, и он не работаетИзменение цвета фона div с Javascript

Вот как мои фотографии отображаются из цикла

echo '<div class="thisphotobox" id="'.$photoid.'"><img src="'.$numphotos['link'].'" alt="photo" class="photolink" style="background-color:white" onclick="clicked('.$photoid.');"></div>';

И это моя функция

function clicked(photoid){ 
    var divcolor = document.getElementById(photoid.toString()).backgroundColor; 

    if (divcolor = "white"){ 
     document.getElementById(photoid.toString()).style.backgroundColor = 'red'; 
    } else { 
     document.getElementById(photoid.toString()).style.backgroundColor = 'white'; 
    } 
}

Оно меняется на красный, но не на белый. Что я делаю? Пожалуйста, помогите мне: D

источник

2014-09-16 Anonymous

Две проблемы есть

1) Вы говорите

var divcolor = document.getElementById(photoid.toString()).backgroundColor;

Он всегда будет возвращать undefined вы должны сказать,

var divcolor = document.getElementById(photoid.toString()).style.backgroundColor;

2) вы говорите

if (divcolor = "white")

Какой оператор присваивания & никогда не возвращает false, поэтому он никогда не будет идти в else состоянии.

говорят

if (divcolor == "white")

Чтобы избежать таких проблем, как это, вы должны сказать

if ("white" == divcolor)

Так что, если вы используете = на месте == по ошибке, он выдаст ошибку синтаксиса.

источник

2014-09-16 02:21:16 Mritunjay

Большого спасибо за ответ. Я уже изменил его, но теперь его даже не окрашивают в красный цвет сейчас :( Я не разбираюсь в инструментах отладки много, но я думаю, что это показывает мне, что divcolor не определен. Я попытался добавить в div это: style = "background-color: white" , но его все еще не работает :( – 2014-09-16 02:28:19

В вашем сравнении в инструкции if у вас есть оператор присваивания, т. Е. Вы использовали только один =. Для получения сравнения равенства используйте два, то есть ==;

divcolor == "white"

Глядя на то, что вы пытаетесь, вы могли бы быть лучше, используя функцию переключения с помощью JQuery вместо этого.

Надеюсь, это поможет.

источник

2014-09-16 02:26:29 worldofjr

Это очень помогает, спасибо! Но это был своего рода надзор, и у меня все еще возникла проблема с моей реальной проблемой : / – 2014-09-16 02:30:50

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

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 

    <script> 
     function clicked(theElement) { 
      var divcolor = theElement.style.backgroundColor; 

      if (divcolor == "white") { 
       theElement.style.backgroundColor = 'red'; 
      } else { 
       theElement.style.backgroundColor = 'white'; 
      } 
     } 
    </script> 
    <style> 
     div { 
      height: 200px; 
      width: 200px; 
      outline: 1px solid green; 
     } 
    </style> 
</head> 
<body> 
    <div onclick="clicked(this);" style="background-color:white" > 
     <img src="http://www.gravatar.com/avatar/d3b62f0eaa6fcaef8d8c76ba9f8a5ea4/?default=&amp;s=160" alt="photo" class="photolink" /> 
    </div> 
</body> 
</html>

источник

2014-09-16 04:33:12

Изменение цвета фона div с Javascript

ответ

Смежные вопросы