使用Javascript在单击时切换背景色

我在一个类项目的工作，需要能够切换一个透明的png点击背景色。我一直在通过网站上的一些例子，但我不能让它工作。我对Javascript完全是个新手，也没有运气尝试插入jQuery代码

以下是目标部分：

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

我曾尝试使用从另一篇文章改编的Javascript将class=“iconLink”添加到href，并将class=“iconBox”添加到图像，但没有成功

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')
});
});

任何建议都将不胜感激

css

.expenseIcon{
      background: red;
}

.colorToggle {
      background: blue;
}

jquery

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

默认情况下，div将具有expenseIcon背景。ToggleClass将使用colorToggle切换div类，因此将覆盖以前的颜色。

---

您不需要超链接标记A来管理单击，只需将其放在DIV上即可。

单击链接时，让我们分析一下当前代码的情况

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

        obj.var1 = text;

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

JQuery查找类名为“iconBox”的所有元素。在您的例子中，这是img元素。然后，对该元素的引用保存在“obj.var1”中。您最终不会使用此引用执行任何操作，因此可以删除这两行

类为“iconBox”的所有元素都已删除类“colorToggle”。你的img元素上没有这个类，所以什么也没有发生

类“colorToggle”被添加到锚元素中。对现在，包装img的元素具有背景色

不幸的是，再次单击锚定标记不会做任何事情，因为锚定标记已经有了“colorToggle”类，我们要做的就是再次尝试添加它。嗯，让我们试着将addClass更改为toggleClass。这是我们的新代码：

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

另外，请注意，因为我们使用的是锚元素，所以p元素不会受到此更改的影响。如果希望整个div更改背景色，请改用此行：

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

---

使用给定的标记：

  <!-- 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>

---

如果你不试图理解代码的真正作用，那么复制和粘贴代码从来都不是一个好主意-你试图将

.iconBox

和

.iconLink

作为目标，但它们不会出现在你的标记中。在你的代码中没有包含类iconLink的元素。单击锚定标记，只需切换类即可。在图像上切换颜色：）请不要只发布代码答案。解释为什么它能解决OP的问题。看，对不起！我是新手，修改后的代码太小了，我认为不需要解释。我相应地更新了我的答案。

  <!-- 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>

//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);
}