使用Javascript切换点击背景色

Question

我正在上一个班级项目，需要能够在单击时切换透明png的背景颜色。 我一直在研究该站点上的许多示例，但无法使其正常运行。 我是Java的新手，也没有运气尝试插入jQuery代码。

这是目标部分：

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

单击链接的图像时，目标是使图像上的背景变为绿色。 再次单击它会将其更改回默认的白色。 这是我想通过点击打开/关闭的CSS。

      .colorToggle {
      background: #A6D785;
      }

我曾尝试将class =“ iconLink”添加到href中，将class =“ iconBox”添加到图像中，而以下Javascript是从另一篇文章改编而来的，但是没有用。

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

任何建议将不胜感激！

Answer 1

当您单击链接时，让我们分解一下当前代码所发生的情况。

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

        obj.var1 = text;

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

1. JQuery查找所有具有类名称“ iconBox”的元素。 就您而言，这是img元素。 然后，对该元素的引用将保存在“ obj.var1”中。 您最终不会对该引用进行任何操作，因此可以删除这两行。

2. 具有“ iconBox”类的所有元素均已除去“ colorToggle”类。 您的img元素上没有此类，因此什么也没发生。

3. 将“ colorToggle”类添加到锚元素。 是! 现在，环绕img的元素具有背景色。

不幸的是，再次单击定位标记将无济于事，因为定位标记将已经具有“ colorToggle”类，而我们要做的就是尝试再次添加它。 嗯 让我们尝试将addClass更改为toggleClass。 这是我们的新代码：

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

另外，请注意，由于我们正在使用anchor元素，因此p元素不会受到此更改的影响。 如果要让整个div更改背景颜色，请改用此行：

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

Answer 2

使用给定的标记：

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

由于该问题要求使用javascript，因此这里提供了一个使用内置js.style方法更新元素的背景色的选项

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

一个类似的例子

Answer 3

的CSS

.expenseIcon{
      background: red;
}

.colorToggle {
      background: blue;
}

jQuery的

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

默认情况下，div将具有consumerIcon背景。 ToggleClass将使用colorToggle切换div类，因此将覆盖以前的颜色。 您不需要超链接标签A来管理点击，只需将其放在DIV上即可。