[英]Changing up and down arrow with jquery
Why won't this jQuery change my image to a down arrow like I want it to? 为什么这个jQuery不会像我想要的那样将我的图像更改为向下箭头? When a user opens a drop down, the up arrow changes to a down arrow.
当用户打开下拉菜单时,向上箭头会变为向下箭头。 I'm doing this with an if else because I don't know any easier way, but it's not working.
我正在用if if做这个,因为我不知道任何更简单的方法,但它不起作用。 The arrow stays up the entire time, no matter how many times I click.
无论我点击多少次,箭头都会保持整个时间。 Here is the jQuery.
这是jQuery。 Should be all thats needed.
应该是所有需要的。 Thanks!
谢谢!
$("h3#mpcClients").click(function() {
$("#hidden0").slideToggle(500);
var up = true;
if (up == true) {
$("td h3").css("background-image", "url(http://www.crm-newsletter.com/client-emails/images/arrowDown.png)");
up=false;
}
else if(up == false) {
$("td h3").css("background-image", "url(http://www.crm-newsletter.com/client-emails/images/arrowUp.png)");
up=true;
}
});
See .toggleClass() and set up some css like so: 请参阅.toggleClass()并设置一些css,如下所示:
.up {
background-image: url("http://www.crm-newsletter.com/client-emails/images/arrowDown.png")
}
.down {
background-image: url("http://www.crm-newsletter.com/client-emails/images/arrowDown.png")
}
Make sure you set up the html to a default arrow direction like so: 确保将html设置为默认箭头方向,如下所示:
<td>
<h3 class="up">Some text</h3>
</td>
Now for the js to change the css classes of the element: 现在为js更改元素的css类:
$("h3#mpcClients").click(function() {
$("#hidden0").slideToggle(500);
// This adds a class if the element doesn't already have it
// if the element already has the class it will remove it.
$("td h3").toggleClass("up down");
});
Everytime the function is called it will set a var up to true. 每次调用该函数时,它都会将var设置为true。 It will go into this clause everytime
它每次都会进入这个条款
var up = true;
if (up == true) {
$("td h3").css("background-image", "url(http://www.crm-newsletter.com/client-emails/images/arrowDown.png)");
up=false;
}
<script type="text/javascript">
function slideT(id)
{
var n=id.split(" ");
$('#panel'+n[1]).slideToggle('fastest');
if(n[2]=='up')
{
$('#img'+n[1]).find('img').remove();
$('#img'+n[1]).find('td').append('<img src="../images/down.png" id="'+n[0]+' '+n[1]+' down" style="float:left" onclick="slideT(this.id)" >');
}
else
{
$('#img'+n[1]).find('img').remove();
$('#img'+n[1]).find('td').append('<img src="../images/up.png" id="'+n[0]+' '+n[1]+' up" style="float:left" onclick="slideT(this.id)" >');
}
}
</script>
this answer will open ur table panel wich its HTML is sth like this: 这个答案将打开你的表格面板,它的HTML是这样的:
<tr style="cursor: pointer" id="img">
<td align="center"> <?=$value?><img src="../images/down.png" style="float: left;" id="slide>" onclick="slideT(this.id)"></td>
</tr>
<table class="list_row_container" style="display: none;" id="panel">
</table>
$("h3#mpcClients").click(function() {
$("#hidden0").slideToggle(500);
$("td h3").toggleClass('up');
});
In your css, by default add the rules for showing the down arrow and in a rule for .up
set the background arrow image accordingly. 在您的CSS中,默认情况下添加显示向下箭头的规则,并在
.up
规则中.up
设置背景箭头图像。
td h3 { background-image : url(http://www.crm-newsletter.com/client-emails/images/arrowDown.png);}
td h3.up { background-image : url(http://www.crm-newsletter.com/client-emails/images/arrowUp.png);}
Much neater. 更整洁。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.