Question

我从后端服务器提供数据并创建div来表示数据。我添加了Boostrap的popover，一切看起来都不错。但是，如果大于20，我想根据变量更改弹出颜色。例如。

  //Ajax from Server:
    //loop thru data
    for (var i in c) {
      var myid =   c[i][0]
      var myTime = c[i][1]
      $("#holdcontainer").append('<div id="' + myid+ '" data-toggle="popover"  data-container="body"  data-placement="top"  title="test1" data-content=" ' + myid + '  Time: ' + myTime + '" >' +myTime  + '</div>'

      if (myTime > 30) {
        //trying this but not working. 
        $("#" +myid + " .popover-title").css({ "background": "red", "color": "white" });
      }
    } //end loop

    //initiate popover
    $('[data-toggle="popover"]').popover({ trigger: "hover" });

Answer 1

selector $（“＃”+ myid +“。popover-title”）不起作用，因为.popover-title不是“＃”+ myid的一部分。

也许解决方案是添加显示的事件：

UPDATE（事件在循环之外）

function start()
{
    for (var i in c) {

        var myid =   c[i][0]
        var myTime = c[i][1]

        $("#holdcontainer").append('<div id="' + myid+ '" data-toggle="popover"  data-container="body"  data-placement="top"  title="test1" data-content=" ' + myid + '  Time: ' + myTime + '" >' +myTime  + '</div>');

        if(myTime>30)     $("#" +myid).attr('data-new-class','newTitle');
    }

     $('[data-toggle="popover"]').popover({             
            trigger: "hover"             
        }).on('shown.bs.popover', function () {
           var newClass=$(this).attr('data-new-class');        

            if (typeof newClass !== "undefined")                
                $(".popover-title:visible").addClass(newClass)

        });

}

FIDDLE

Answer 2

是不是myTime被解释为字符串而不是数字？

试试这个：

var myTime = Number(c[i][1]);

如果你设置一个JSFiddle会更容易尝试。

根据父项值标准更改popover颜色/类

2 个答案: