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

我曾尝试将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')
    });
});

JQuery查找所有带有类名＆＃34; iconBox＆＃34;的元素。在你的情况下，这是img元素。然后将对该元素的引用保存在＆＃34; obj.var1＆＃34;中。您最终不会使用此引用执行任何操作，因此可以删除这两行。
所有带有类＆＃34; iconBox＆＃34;的元素有课程＆＃34; colorToggle＆＃34;除去。你的img元素上没有这个类，所以没有任何反应。
班级＆＃34; colorToggle＆＃34;被添加到锚元素。是!现在包裹img的元素有一个背景颜色。

不幸的是，再次点击锚标记不会做任何事情，因为锚标记已经有了＃34; colorToggle＆＃34;我们将要做的所有课程都会尝试再次添加它。嗯。让我们尝试将addClass更改为toggleClass。这是我们的新代码：

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

另外，请注意，因为我们正在使用锚元素，所以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);
}

a similar example

Answer 3

<强> CSS

.expenseIcon{
      background: red;
}

.colorToggle {
      background: blue;
}

<强> jquery的

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

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

点击使用Javascript切换背景颜色

3 个答案: