如何使用jQuery使元素替换颜色？

Question

So I figured out how to make an element change once it is clicked--but then, I can't figure out how to make it change back to the original when it is clicked again.

I am trying to get the gray pluses to change to green when they are clicked, and then back to gray if clicked again.

Make it change to one color:

$(document).ready(function(){
    $(document).on('click', '#add_image', function(){

        $(this).empty();
        $(this).append("<img src='images/green_plus.png' id='green'/>")
    });
})

My attempt to make it alternate:

$(document).ready(function(){
    $(document).on('click', '#add_image', function(){

        $(this).empty();
        $(this).append("<img src='images/green_plus.png' id='green'/>")
        $(this).click(function(){
                $(this).empty();
                $(this).append("<img src='images/gray_plus.png' id='green'/>")
        });
    });
})

Also, here is the php which generated the list:

foreach($schools as $school){
        echo "<tr>";
            echo "<td>";
                echo "<a href='#' id='add_image'><img src = 'images/gray_plus.png'/></a>";
            echo "</td>";       
            echo "<td>";
                echo ("<a href='school/?school_name=" . $school['school_name'] . "'>");
                echo $school['school_name'];
                echo "</a>";
            echo "</td>";
       echo "</tr>";
        }

Answer 1

toggleClass() is actaully what you need here.

create a class , one with an img green_plus and other with grey_plus.and on click change the class.

CSS

.greyplus{
  background-image: 'path/to/gryimg'
}
.greenplus{
  background-image: 'path/to/grnimg'
}

html

...
echo "<a href='#' id='add_image' class='greyplus'></a>";
...

jquery

$('#add_image').click(function(){
  $(this).toggleClass('greyplus').toggleClass('greenplus'); 
});

i don't think you need to use on unless you are adding it dynamically.

Answer 2

See you have to use classes instead of id because id should be unique for each element but we can use same class name to multiple instances of dom nodes.

$(document).ready(function(){
  var i = 0;
  $(document).on('click', '.add_image', function (e) { // change id to class
    e.preventDefault();  //<----stop the default behavior
    var img = "";
    $(this).empty();
    if(i==0) { 
       img = "green_plus.png"
       i++; //<----------------update to put it here.
    }else{
       img = "gray_plus.png";
       i = 0;
    }
    $(this).append("<img src='images/"+img+"' class='green'/>"); // change id to class
  });
});

so you have to use class name instead of IDs,

Answer 3

I suggest using different classes for that. Make plus sign as background image. And then do jQuery logic:

$(document).on('click', '.myButton', function(){
    $(this)
        .toggleClass('redPlus') // class for clicked element
        .toggleClass('greenPlus'); // class for default element
});

Answer 4

add css for background image

.original{
background-image: (image here)
}
.changed{
background-image: (another image)
}

on jquery just do as:

$(document).ready(function(){
    $(document).on('click', '#add_image', function(){
      if($(this).hasClass('original'){
         $(this).removeClass('original'); 
         $(this).addClass('changed');
      }
      else{
         $(this).addClass('original');
      } 
    });
})

Answer 5

I would set up appropriate CSS classes for each desired color images Ie .green with default selector being grey, then do this:

    $('body').on("click", "#add_image", function() {
        $(this).toggleClass("green");
    });

Then use CSS before pseudo selectors to put the image beside the clickable element in the CSS classes themselves Ie .green.