Question

当点击箭头时，我正在使用JQuery扩展和收缩DIV。箭头应指向上/下，具体取决于DIV是否已展开。

我试过这个，但似乎没有用。箭头保留为默认向下箭头。上滑/下滑工作正常，但图像不会改变。任何人都可以解释原因吗？

         function toggle_visibility(id) {
             $e = $("#" + id);
             $arrow = $("#arrow" + id);

             if ($e.is(':visible')){
                 $e.slideUp("slow");
                 $arrow.css('background-image', 'url(../images/downarrow.png)');
             }else{
                $e.slideDown("slow");
                 $arrow.css('background-image', 'url(../images/uparrow.png)');
             }
         }

Answer 1

这应该有效：

function toggle_visibility(id) {
         $e = $("#"+id);

         if ($e.is(':visible')){
             $e.slideUp("slow");
             $e.css('background-image', 'url(../images/downarrow.png)');
         }else{
            $e.slideDown("slow");
             $e.css('background-image', 'url(../images/uparrow.png)');
         }
     }

Answer 2

工作jsfiddle：http://jsfiddle.net/patelmilanb1/9YA67/

<div id="arrow">Hello</div>

toggle_visibility($('#arrow'));

function toggle_visibility(id) {
    var $element = $(id);

    if ($element.is(':visible')) {
        $element.slideUp("slow");
        $element.css('background-image', 'url(../images/downarrow.png)');
    } else {
        $element.slideDown("slow");
        $element.css('background-image', 'url(../images/uparrow.png)');
    }
}

更新：在这种情况下，课程可以派上用场。因为它更具可读性，并且可以将CSS保留在javascript之外。

更新了课程：http://jsfiddle.net/patelmilanb1/9YA67/1/

toggle_visibility($('#arrow'));

function toggle_visibility(id) {
    var $element = $(id);

    if ($element.is(':visible')) {
        $element.addClass("down").removeClass("up");
    } else {
        $element.addClass("up").removeClass("down");
    }
}

Answer 3

你的语法错误

$(e).css('background-image', 'url(../images/downarrow.png)');

将其替换为

$e.css('background-image', 'url(../images/downarrow.png)');

Answer 4

$(e).css(...)应为$e.css(...)

Answer 5

试试这种方式

var $e = $("#"+id)

Answer 6

通过jQuery中的css（'attributename'，'attributevalue'）函数设置任何值都会将该属性添加到元素的内联样式中。在检查器中，它经常被标记为element.style

除了发布的答案之外，我希望你只通过类来做这个，然后你可以通过添加/删除元素中的类来创建一个单独的类与备用背景图像和切换类，这不会出现在element.style中，它只是切换类，而是在检查器中显示。

Javascript - 点击更改DIV背景

6 个答案: