Question

我正在尝试使用jQuery更改CSS文件夹中的UL图像。这是针对Twitter流，其中帐户发布的化身与推文一起更改。使用f.setOpaque(false);非常简单，但我很难改变新图像的URL。

这是我的客户代码：

.css

CSS：

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

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的有效是否对此方案有效。

list-style-image的工作方式是它需要格式为list-style-image:url('')的工作网址，因此您的数据参数必须是括号和引号括起来的有效图像路径。

Answer 3

因为css只处理简单的属性值对，所以JS需要更新整个值才能工作。这是an example，点击图片查看更改（为简单起见，我使用背景图片，除了属性名称之外没有区别，并且演示了提供完全形成的属性值的原则）... < / p>

$('.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

使用jQuery更改CSS属性

3 个答案: