javascript - jQuery [object 对象] 问题

Question

我想使用 jQuery 更新一个 css 属性，但它不起作用。在我的第一个警报下面的代码中使用警报

url("file:///H:/Web/example/HTML/images/red-arrow-up.png")

但是第二个警报(在 if 语句中)出现了

[object Object]

但我想要它做的是更新属性并在 url 中将 up 更改为 down。知道我做错了什么吗？

    $(document).ready(function() {
        $( ".portlet-header" ).click(function() {
            var currValue = $(this).children(".portlet-arrow").css("background-image");
            alert (currValue)
            if ($("currValue:contains('up')"))  {
                var newValue = $(currValue.replace("up", "down"));
                alert(newValue)
                $(this).children(".portlet-arrow").css("background-image", newValue)    
            };
            if ($("currValue:contains('down')"))    {
                var newValue = $(currValue.replace("down", "up"));
                alert(newValue)
                $(this).children(".portlet-arrow").css("background-image", newValue)    
            };
        });
    });

Answer 1

这基本上都归结为在没有阅读文档以找出选择器的实际作用的情况下就过度使用 jQuery 选择器语法。

1. 为什么要在 $() 中包围 currValue.replace("down", "up")？这看起来像是尝试从包含图像 URL 的字符串创建 jQuery 对象。不要那样做。不得无缘无故地将任意 Javascript 代码包含在 $() 中。

2. 另外，$("currValue:contains('down')") 并不像您想象的那样。该语法用于根据特定条件选择 DOM 节点，而不是用于在字符串上实现任意条件语句。 You just want to search within a string .

$(document).ready(function() {
    $(".portlet-header").click(function() {
        var currValue = $(this).children(".portlet-arrow").css("background-image");
        alert(currValue);
        if (currValue.indexOf('up') != -1) {
            var newValue = currValue.replace("up", "down");
            alert(newValue);
            $(this).children(".portlet-arrow").css("background-image", newValue);
        }
        if (currValue.indexOf('down') != -1) {
            var newValue = currValue.replace("down", "up");
            alert(newValue);
            $(this).children(".portlet-arrow").css("background-image", newValue);
        }
    });
});

代码可以进一步改进:

$(function() {
    $(".portlet-header").click(function() {

        var currValue = $(this).children(".portlet-arrow").css("background-image");
        alert(currValue);

        if (currValue.indexOf('up') != -1) {
            var newValue = currValue.replace("up", "down");
        }
        else if (currValue.indexOf('down') != -1) {
            var newValue = currValue.replace("down", "up");
        }
        else {
            return;
        }

        alert(newValue);
        $(this).children(".portlet-arrow").css("background-image", newValue);
    });
});