使用jquery更改向上和向下箭头

时间:2012-02-14 18:45:55

标签: javascript jquery

为什么这个jQuery不会像我想要的那样将我的图像更改为向下箭头?当用户打开下拉菜单时,向上箭头会变为向下箭头。我正在用if if做这个,因为我不知道任何更简单的方法,但它不起作用。无论我点击多少次,箭头都会保持整个时间。这是jQuery。应该是所有需要的。谢谢!

    $("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;
            }
            });

4 个答案:

答案 0 :(得分:7)

请参阅.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")
}

确保将html设置为默认箭头方向,如下所示:

<td>
    <h3 class="up">Some text</h3>
</td>

现在让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"); 
});

答案 1 :(得分:4)

每次调用该函数时,它都会将var设置为true。 它每次都会进入这个条款

    var up = true;

    if (up == true) {

    $("td h3").css("background-image", "url(http://www.crm-newsletter.com/client-emails/images/arrowDown.png)");
    up=false;
  }

答案 2 :(得分:1)

 $("h3#mpcClients").click(function() {
            $("#hidden0").slideToggle(500); 

            $("td h3").toggleClass('up');
});

在您的css中,默认情况下会添加显示向下箭头的规则,并在.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);}

更整洁。

答案 3 :(得分:1)

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

这个答案会打开你的HTML表格面板,就像这样:

<tr  style="cursor: pointer" id="img">
        <td align="center">&nbsp;<?=$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>