使用jquery无法更改背景颜色

Question

我试图在名为alertPopup.js的文件中动态更改某些css（背景颜色）。

基本上我在alertPopup.js中使用它（整个代码）：

(function (diagram) { $(document).ready(function () {

var diagramData = window.svgpublish.diagramData;
$.each(diagramData, function (shapeId, shapeData) {

    var props = shapeData.Props;
    if (!props)
        return;
    var $shape = $("#" + shapeId);



    // build options for popover: placement function, iframe url from properties
    var options1 = {    
        placement: function (context, source) {
            var position = $(source).position();
            if (position.right > 500)
                return "left";
            if (position.left < 500)
                return "right";
            if (position.top < 300)
                return "bottom";
            return "top";
        },
        trigger: "manual",
        container: "html",
        html: true,
        content: ''+
        '<span class="h5"><center><b> '+props.header+'</b></center></span>' +
        '<hr style="margin:5px"> ' +
        '<table border=0><tr><td><img src="'+props.Image+'"></img></td><td width=20px></td><td><span class="text-muted small"> ' + props.information1 + '</span></td></tr></table>',
        title: props.title
    };

    var options2 = {
        placement: function (context, source) {
            var position = $(source).position();
            if (position.right > 500)
                return "left";
            if (position.left < 500)
                return "right";
            if (position.top < 300)
                return "bottom";
            return "top";
        },
        trigger: "manual",
        container: "html",
        html: true,
        content: ''+
        '<span class="h5"><center><b> '+props.header+'</b></center></span>' +
        '<hr style="margin:5px">' +
        '<table border=0><tr><td><img src="'+props.Image+'"></img></td><td width=10px></td><td><span class="text-muted small"><ul><li> ' + props.information1 + '</li><li> ' + props.information2 + '</li></ul></span></td></tr></table>',
        title: props.title
    };

    var options3 = {    
        placement: function (context, source) {
            var position = $(source).position();
            if (position.right > 500)
                return "left";
            if (position.left < 500)
                return "right";
            if (position.top < 300)
                return "bottom";
            return "top";
        },
        trigger: "manual",
        container: "html",
        html: true,
        content: ''+
        '<span class="h5"><center><b> '+props.header+'</b></center></span>' +
        '<hr style="margin:5px">' +
        '<table border=0><tr><td><img src="'+props.Image+'"></img></td><td width=10px></td><td><span class="text-muted small"><ul><li> ' + props.information1 + '</li><li> ' + props.information2 + '</li><li> ' + props.information3 + '</li></ul></span></td></tr></table>',
        title: props.title
    };

    var options4 = {    
        placement: function (context, source) {
            var position = $(source).position();
            if (position.right > 500)
                return "left";
            if (position.left < 500)
                return "right";
            if (position.top < 300)
                return "bottom";
            return "top";
        },
        trigger: "manual",
        container: "html",
        html: true,
        content: ''+
        '<span class="h5"><center><b> '+props.header+'</b></center></span>' +
        '<hr style="margin:5px">' +
        '<table border=0><tr><td><img src="'+props.Image+'"></img></td><td width=10px></td><td><span class="text-muted small"><ul><li> ' + props.information1 + '</li><li> ' + props.information2 + '</li><li> ' + props.information3 + '</li><li> ' + props.information4 + '</li></ul></span></td></tr></table>',
        title: props.title
    };

    var options5 = {
        placement: function (context, source) {
            var position = $(source).position();
            if (position.right > 500)
                return "left";
            if (position.left < 500)
                return "right";
            if (position.top < 300)
                return "bottom";
            return "top";
        },
        trigger: "manual",
        container: "html",
        html: true,
        content: ''+
        '<span class="h5"><center><b> '+props.header+'</b></center></span>' +
        '<hr style="margin:5px">' +
        '<table border=0><tr><td><img src="'+props.Image+'"></img></td><td width=10px></td><td><span class="text-muted small"><ul><li> ' + props.information1 + '</li><li> ' + props.information2 + '</li><li> ' + props.information3 + '</li><li> ' + props.information4 + '</li><li> ' + props.information5 + '</li></ul></span></td></tr></table>',
        title: props.title
    };

    var options6 = {    
        placement: function (context, source) {
            var position = $(source).position();
            if (position.right > 500)
                return "left";
            if (position.left < 500)
                return "right";
            if (position.top < 300)
                return "bottom";
            return "top";
        },
        trigger: "manual",
        container: "html",
        html: true,
        content: ''+
        '<span class="h5"><center><b> '+props.header+'</b></center></span>' +
        '<hr style="margin:5px">' +
        '<table border=0><tr><td><img src="'+props.Image+'"></img></td><td width=10px></td><td><span class="text-muted small"><ul><li> ' + props.information1 + '</li><li> ' + props.information2 + '</li><li> ' + props.information3 + '</li><li> ' + props.information4 + '</li><li> ' + props.information5 + '</li><li> ' + props.information6 + '</li></ul></span></td></tr></table>',
        title: props.title
    };

var ImageOption = {
    placement: function (context, source) {
        var position = $(source).position();
        if (position.right > 500)
            return "left";
        if (position.left < 500)
            return "right";
        if (position.top < 300)
            return "bottom";
        return "top";
    },
    trigger: "manual",
    container: "html",
    html: true,
    content: '<img src="'+props.image_path+'"></img>'
};

        // create the popover for the shape  
if (props.infoItems == 1){  
        $shape.popover(options1);
};
if (props.infoItems == 2){  
        $shape.popover(options2);
};
if (props.infoItems == 3){  
        $shape.popover(options3);
};
if (props.infoItems == 4){  
        $shape.popover(options4);
};
if (props.infoItems == 5){  
        $shape.popover(options5);
};
if (props.infoItems == 6){  
        $shape.popover(options6);
};

if (props.eB_Image == "yes"){
        $shape.popover(ImageOption);
        $('.popover').css({backgroundColor:'yellow'});  
};

        // decorate the shape with "hand" cursor
        $shape.css("cursor", "pointer");

        // hide the popover hiding when clicked outside
        $('body').on('click', function (e) {
            $shape.popover('hide');
        });

        $shape.on('click', function (evt) { 
            evt.stopPropagation();
            $shape.popover('toggle');

        });

        $shape.on('mouseover', function () {
            $(this).attr('filter', 'url(#hover)');
        });

        $shape.on('mouseout', function () {
            $(this).removeAttr('filter');
        });

        $shape.tooltip({

        });
    });
});
 })(window.svgpublish);

图像显示在弹出窗口中，所以我知道它正在工作。

CSS是这样的：

.popover {
position: absolute;
top: 0;
left: 0;
z-index: 1060;
display: none;
max-width: 450px;
padding: 1px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 1.42857143;
text-align: left;
text-align: start;
text-decoration: none;
text-shadow: none;
text-transform: none;
letter-spacing: normal;
word-break: normal;
word-spacing: normal;
word-wrap: normal;
white-space: normal;
background-color: #fff;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, .2);
border-radius: 6px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
line-break: auto}

但每次刷新HTML时，弹出窗口都不再起作用。

这个设置很复杂，并且是使用Visio到SVG导出工具创建的，但我已经能够调整一些代码以使其完成我想要它做的事情。

但是出于某种原因，这不会修改.popover css中的背景颜色属性。

我可以附加完整的文件（包含一些JS文件，但看起来这是一个，而css文件就是那个）。 我可以进入css并在那里更改属性，它在弹出窗口中工作，所以我知道它是正确的css和属性。

Answer 1

这段代码：

var ImageOption = {
    $('.popover').css({'background-color','#f48035'});
    placement: function (context, source) {
        var position = $(source).position();
        if (position.right > 500)
            return "left";
        if (position.left < 500)
            return "right";
        if (position.top < 300)
            return "bottom";
        return "top";
    },
    trigger: "manual",
    container: "html",
    html: true,
    content: ''+
    '<img src="'+props.image_path+'"></img>'
};

会产生一个

Uncaught SyntaxError: Unexpected string

... JavaScript错误，因为您在定义变量时尝试运行JavaScript。 您需要将jQuery命令放在变量定义之外。

第二个问题是你的jQuery .css()语法。 您可以将属性对象传递给它，并使用相应的值：`

.css({
   prop1:'propValue1', 
   prop2:'propValue2',
...}) 

或者您传递两个参数：属性名称第一个和属性值第二个：

 .css('prop1','propValue1');

你有一个混合物，它不起作用：在键和值之间用逗号对象。

下面的代码将起作用，只要你已经有一个名为props的变量，其中一个名为image_path的属性将有效路径保存为值（我假设你这样做，因为你刚刚发布了一小段代码的小片段）。

---

简而言之，你犯了两个错误：
a）您将命令放在变量定义中
b）你的命令语法有错误。

$('.popover').css({backgroundColor:'#f48035'});

var ImageOption = {
    placement: function (context, source) {
        var position = $(source).position();
        if (position.right > 500)
            return "left";
        if (position.left < 500)
            return "right";
        if (position.top < 300)
            return "bottom";
        return "top";
    },
    trigger: "manual",
    container: "html",
    html: true,
    content: '<img src="'+props.image_path+'"></img>'
};