Question

我想使用jQuery更新css属性，但它无法正常工作。使用下面代码中的警报我的第一个警报会显示

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

然后第二个警报（在if语句中）显示

[object Object]

但我想要它做的是更新属性并在网址中更改为向下。知道我做错了什么吗？

    $(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选择器语法的过分，而没有阅读文档以找出选择器实际执行的操作。

为什么你围绕currValue.replace("down", "up")中的$()？这看起来像是尝试从包含图像URL的字符串中创建jQuery对象。不要那样做。任意Javascript代码不会被$()无理由包围。
此外，$("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);
    });
});

Answer 2

警报显示[object Object]，因为您正在通过以下方式从字符串创建jQuery对象：

$(currValue.replace("up", "down"));

你应该使用currValue.replace（“up”，“down”）;没有$（）。

另外

if ($("currValue:contains('up')")) {

不正确。这总是返回true，因为你从传递给$（）的字符串创建空的jQuery对象。

您应该使用：

currValue.indexOf('up') !== -1

或

/up/.test(currValue)

测试字符串是否包含某些子字符串。

jQuery [object Object]问题

2 个答案: