我正在开发一个类项目,需要能够在点击时切换透明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')
});
});
非常感谢任何建议!
答案 0 :(得分: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');
答案 1 :(得分:0)
使用给定的标记:
<!-- 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);
}
答案 2 :(得分:-1)
<强> CSS 强>
.expenseIcon{
background: red;
}
.colorToggle {
background: blue;
}
<强> jquery的强>
$(".expenseIcon").click(function () {
$('.expenseIcon').toggleClass('colorToggle');
});
默认情况下,div将具有expenseIcon背景。 ToggleClass将使用colorToggle切换div类,因此将覆盖以前的颜色。 您不需要超链接标记A来管理点击,只需将其放在DIV上。