javascript - 使用 Javascript 在点击时切换背景颜色

Question

我正在做一个类元素，需要能够在点击时切换透明 png 的背景颜色。我一直在处理网站上的许多示例，但无法正常工作。我是 Javascript 的新手，也没有尝试插入 jQuery 代码。

这是目标部分:

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

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

      .colorToggle {
      background: #A6D785;
      }

我曾尝试使用从另一篇文章改编的以下 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')
});
});

如有任何建议，我们将不胜感激!

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”被添加到 anchor 元素。是的!现在包裹 img 的元素有了背景颜色。

不幸的是，再次单击 anchor 标记不会执行任何操作，因为 anchor 标记已经具有“colorToggle”类，而我们要做的只是再次尝试添加它。唔。让我们尝试将 addClass 更改为 toggleClass。这是我们的新代码:

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

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

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