使用Javascript切换点击背景色

Question

I am working on a class project and need to be able to toggle the background color of a transparent png on click. I have been working through a number of examples from the site, but I can't get it working. I am a total novice at Javascript and haven't had luck trying to plug in jQuery code either.

Here is the targeted section:

        <div class="expenseIcon"><a href="#">
       <img src="images/mortgage.png"></a><br/>
       <p>Rent or Mortgage</p>
       </div>

On clicking the linked image, the goal is for the background on the image to change to green. Clicking it again would change it back to the default, white. Here's the CSS I'd like to toggle on/off with click.

      .colorToggle {
      background: #A6D785;
      }

I had tried adding class="iconLink" to the href and class="iconBox" to the image with the following Javascript adapted from another post, but it didn't work.

var obj = {};
$(document).ready(function () {
$(".iconLink").click(function () {
    var text = $(this).find(".iconBox");

    obj.var1 = text;
    //alert(obj.var1);
    //return false;

   $('.iconBox').removeClass('colorToggle');
   $(this).addClass('colorToggle')
});
});

Any advice would be greatly appreciated!

Answer 1

Let's break down what is happening with your current code when you click the link.

var obj = {};
$(document).ready(function () {
    $(".iconLink").click(function () {
        var text = $(this).find(".iconBox");

        obj.var1 = text;

       $('.iconBox').removeClass('colorToggle');
       $(this).addClass('colorToggle')
    });
});

1. JQuery finds all elements with the classname "iconBox". In your case, this is the img element. The reference to that element is then saved in "obj.var1". You do not end up doing anything with this reference, so these two lines can be removed.

2. All elements with the class "iconBox" have the class "colorToggle" removed. Your img element didn't have this class on it, so nothing happens.

3. The class "colorToggle" is added to the anchor element. Yes! Now the element wrapping the img has a background color.

Unfortunately, clicking the anchor tag again won't do anything, since the anchor tag will already have the "colorToggle" class and all we would be doing would be trying to add it again. Hmm. Let's try changing addClass to toggleClass. Here's our new code:

$(document).ready(function () {
    $(".iconLink").click(function () {
        $(this).toggleClass('colorToggle');
    }
});

Also, note that because we're working with the anchor element, the p element won't be affected by this change. If you want the entire div to change background colors, use this line instead:

$(".expenseIcon").toggleClass('colorToggle');

Answer 2

Using the given markup:

  <!-- to toggle the bg-color onClick of anchor tag -->  
   <div class="expenseIcon">
      <a href="#">
         <img src="images/mortgage.png">
      </a>
      <br/>
      <p>Rent or Mortgage</p>
   </div>

since the question asks for javascript, heres an option for updating the background-color of an element using the built-in js.style method

//get a handle on the link 
//only one element w/ className 'expenseIcon' 
//first child of 'expenseIcon' is the anchor tag
var link = document.getElementsByClassName('expenseIcon')[0].children[0]; 
//get a handle on the image 
var image = link.children[0];
//listen for click on link & call bgUpdate() 
link.addEventListener('click', bgUpdate, false);
function bgUpdate() { 
   if(image.style.backgroundColor === 'lightgoldenrodyellow'){
       image.style.backgroundColor = 'aliceblue';
   } else if (image.style.backgroundColor === 'aliceblue') {
        image.style.backgroundColor = 'lightgoldenrodyellow';
   }
   else console.log('image bgColor: ' + image.style.backgroundColor);
}

a similar example

Answer 3

css

.expenseIcon{
      background: red;
}

.colorToggle {
      background: blue;
}

jquery

$(".expenseIcon").click(function () {
   $('.expenseIcon').toggleClass('colorToggle');
});

By default, the div will have expenseIcon background. ToggleClass will toggle the div class with colorToggle so will override the previous color. You don't need an hyperlink tag A to manage clicks, just put it on the DIV.