Ich versuche, diesen Effekt zu erzielen, wobei die Hintergrundfarbe img anfangs weiß ist und wenn sie schwebt, sollte sie rot sein. Wenn jedoch darauf geklickt wird, sollte eine Funktion ausgeführt werden und die Hintergrundfarbe img sollte bei Rot bleiben. Wenn Sie jedoch erneut auf das Bild klicken, sollte der Stil dem ursprünglichen Stil entsprechen. Wenn Sie mit der Maus darüber fahren, ist die Hintergrundfarbe des Bilds rot und wenn dies nicht der Fall ist, ist sie weiß.

Ich hoffe, Sie bekommen die Nachricht klar, hier ist mein Code:

<script type="text/javascript">            
        document.addEventListener('DOMContentLoaded', function() {

            var img = document.getElementById('search'),
                search = document.getElementById('searchEngine');

            search.className = 'invisible';

            img.addEventListener('mouseover', makeRed);
            function makeRed(event) {
                img.style.backgroundColor = "red";
            }

            img.addEventListener('mouseout', makeWhite);
            function makeWhite(event) {
                img.style.backgroundColor = "white";
            }

            img.addEventListener('click', displaySearchField);

            function displaySearchField(event) {
                if (search.className == 'invisible') {

                    search.className = 'visible';

                    img.style.backgroundColor = "red";

                } else {
                    search.className = 'invisible';
                    makeWhite();

                }
            }
        });
    </script>

Das Problem ist, dass die Hintergrundfarbe beim Klicken einfach nicht rot bleibt!

Update habe ich jetzt bis hier mit deinen Ratschlägen erreicht:

document.addEventListener('DOMContentLoaded', function() {

var img = document.getElementById('search'),
    search = document.getElementById('searchEngine'),
    clicked = false;

search.className = 'invisible';

img.addEventListener('click', displaySearchField);

function displaySearchField(event) {
    if (clicked == false) {
        clicked = true;
        img.style.backgroundColor = 'red';
        search.className = 'visible';
        console.log('You have clicked!');

    } else {
        clicked = false;
        img.addEventListener('mouseover', function() {
            img.style.backgroundColor = "red";
        });


        img.addEventListener('mouseout', function() {
            img.style.backgroundColor = "white";
        });

        search.className = 'invisible';

        console.log('You have unclicked!');
    }
}

});

Kann mich bitte jemand in diesem letzten Moment mitnehmen, ich bekomme immer noch nicht den gewünschten Effekt ...

0
Ameed Aabidi 13 Aug. 2015 im 05:18

3 Antworten

Beste Antwort

Sie können dies durch die Verwendung von CSS erheblich vereinfachen, wenn Sie eine Klasse (sagen wir "initial") und eine separate Klasse (nennen wir es "geklickt") haben. Sie können Javascript verwenden (jQuery ist dafür großartig), um die Klasse auf geklickt oder initial zu setzen, und CSS verwenden, um den Hintergrund automatisch weiß zu machen und die Hover-Farbe auf rot zu setzen. Dies ist weitaus schneller als in JavaScript und auch weniger CPU-intensiv. Die Verwendung von CSS zur Verwaltung Ihrer Farben auf diese Weise ist auch für alle Browser universeller kompatibel.

2
Bob Dill 13 Aug. 2015 im 02:29

Wie Bob sagt, können Sie die CSS :hover -Pseudoklasse verwenden, um den Hover-Teil auszuführen, und das Skript verwenden, um den Hintergrund beim Klicken umzuschalten.

Ich habe einige Hilfsfunktionen eingefügt, aber vieles davon kann direkt auf DOM-Elementen mithilfe der ausgeführt werden. rel = "nofollow"> HTML5 classList API.

Verwenden der classList -API:

.blah {background-color: blue;}
img {background-color: red;}
img:hover {background-color: blue;}
<img id="d0" onclick="this.classList.toggle('blah')" src="a.jpg" width=100 height=100>

Verwenden von DOM Core-APIs

// Check if el has className
function hasClass(el, className) {
  return el.className.split(/\s+/).indexOf(className) != -1;
}

// Add className to el
function addClass(el, className) {
  if (!hasClass(el, className)) {
    var classList = el.className.split(/\s+/);
    classList.push(className)
    el.className = classList.join(' ');
  }
  return el;
}

// Remove className from el
function removeClass(el, className) {
  var classList;
  if (hasClass(el, className)) {
    classList = el.className.split(/\s+/);
    classList.splice(classList.indexOf(className), 1);
    el.className = classList.join(' ');
  }
  return el;
}

// If el has className, remove it. Otherwise, add it
function toggleClass(el, className) {
  if (hasClass(el, className)) {
    removeClass(el, className);
  } else {
    addClass(el, className);
  }
}
  .blah {background-color: blue;}
  img {background-color: red;}
  img:hover {background-color: blue;}
<img id="d0" onclick="toggleClass(this, 'blah')" src="a.jpg" width=100 height=100>
1
RobG 13 Aug. 2015 im 03:00

Danke Bob Dill, deine Idee hat funktioniert:

document.addEventListener('DOMContentLoaded', function() {

var img = document.getElementById('search'),
    search = document.getElementById('searchEngine'),
    clicked = false;

img.className = 'hover';
search.className = 'invisible';

img.addEventListener('click', displaySearchField);

function displaySearchField(event) {
    if (clicked == false) {
        clicked = true;
        img.className = 'nohover';
        search.className = 'visible';            
    } else {
        clicked = false;
        img.className = 'hover';

        search.className = 'invisible';

    }
}

});
2
Syed Ameed 27 Aug. 2015 im 19:43