使用 jQuery 更改 CSS 属性

Question

我正在尝试使用 jQuery 更改 CSS 文件夹中的 UL 图像。这适用于 Twitter 流，其中帐户发布的头像与推文一起更改。 使用 .css 非常简单，但我正在努力更改新图片的 URL。

这是我的客户端代码：

$(document).ready(function(){
    var socket = io();

    $('form').submit(function(){
        socket.emit('chat message', $('#m').val());
        $('#m').val('');
        return false;
    });

    socket.on('info', function(data){
        console.log("this is teh question" + " " + data);
        $("#tweets").prepend("<li>" + data + "</li>");
    });

    socket.on('reply', function(data){
        console.log("this is my reply" + " " + data);
        $("#messages").prepend("<li>" + data + "</li>");
    });

    socket.on('userPic', function(data) {
        console.log("the userPic: " + data);
        $("ul#tweets").css("list-style-image: url", data);
    });
});

还有 CSS：

body {
    font: 13px Helvetica, Arial;
    max-width: 1250px;
    width: 100%;
    margin: auto;
}

form {
    background: #fff;
    padding: 10px;
    width: calc(100% - 20px);
    display: inline-block;
    border-bottom: 1px solid #ccc;
}

form input {
    border: 3px inset;
    padding: 7px 5px;
    width: calc(100% - 140px);
    margin-right: 10px;
    display: inline-block;
    font-size: 15px;
}

form button {
    width: 110px;
    background: #177cc1;
    color: #fff;
    border-radius: 6px;
    text-transform: uppercase;
    font-size: 22px;
    border: none;
    padding: 5px 10px;
    display: inline-block;
    cursor: pointer;
}

form button:hover {
    background: #177cee;
}

form button:active {
    background: #177caa;
}

form button:focus {
    outline: 0;
}

.container {
    display: inline-block;
    width: calc(100% - 60px);
    padding: 20px;
    margin: 5px 10px 20px;
    background: #222;
}

.content {
    display: inline-block;
    width: 100%;
    box-shadow: 1px 1px 1px 1px #555;
    border: 1px solid #555;
}

.tweets_container {
    display: inline-block;
    width: 100%;
    background: #fff;
}

.header {
    font-size: 32px;
    text-align: center;
    text-transform: uppercase;
    color: #fff;
    background: #333;
    padding: 15px;
}

#messages, #tweets {
    display: inline-block;
    margin: 5px;
    padding: 10px;
    width: calc(50% - 32px);
}

#tweets li, #messages li {
    padding: 10px;
    font-size: 18px;
}

#messages {
    background: #444;
    color: #fff;
}

ul#tweets {
    list-style-image: url("");
    height: 100px;
    width: 100px;
}

ul#messages {
    list-style-image: url("");
    height: 100px;
    width: 100px;
}

#tweets {
    background: #fff;
    color: #333;
}

.footer {
}

Answer 1

我相信这一点：

$("ul#tweets").css("list-style-image: url", data);

应该改为：

$("ul#tweets").css("list-style-image", "url('"+data+"')");

Answer 2

不查看您的 nodejs 和 socket.io，检查 socket.on('userPic', function(data) { 是否触发了 userPic 事件。如果是，请检查data的valid对于这个场景是否有效。

list-style-image 的工作方式是它需要list-style-image:url('') 格式的工作 url，因此您的数据参数需要是由括号和引号包裹的有效图像路径。

Answer 3

因为 css 只处理简单的属性值对，你的 JS 需要更新整个值才能工作。这里是an example，点击图片查看变化（为了简单起见，我使用了背景图片，除了属性名称和提供完全形成的属性值的原理之外没有区别）...

$('.image').css(
    'background-image', 
    'url("http://lorempixel.com/400/200/sports/")'
);

你会使用这样的东西来获取一个变量：

$('.image').css(
    'background-image', 
    'url("' + data + '")'
);

这与任何其他 css 属性更改相同。右侧的整个值需要更新才能正常工作。人们有时会遇到的类似问题是忘记在尺寸值中添加单位（例如宽度）并将数字直接放入：

.css('width', number); // wrong
.css('width', number + '%'); // right