jquery - 基于 json 值突出显示 Jquery Leaflet 弹出窗口中的文本 - 使用 CSS？

Question

我在传单中有我的标记的弹出窗口，其中填充了来自 ajax 调用的信息。我想做的是设置一些规则来突出显示弹出窗口中的数据。但我不确定如何。我想做一些类似于 excel 默认条件格式的事情。也许应该用 CSS 来完成？

与此类似:http://jsfiddle.net/ambiguous/RdGEy/

编辑: 看起来这可能是一个很好的兔子洞:http://jsbin.com/zotome/edit?js,output

或者这个:http://jsfiddle.net/ZmesE/1/

但我没能在弹出窗口中应用它。此外，它看起来以我不想做的“p”为目标，因为所有额外空间的格式会变得多么丑陋。

如果 markers[i]["Number"] >= 150 则黄色背景和深黄色文本

如果 markers[i]["Number"] >= 250 则红色背景和深红色文本

如果(每个单独处理)markers[i]["PropX"] >= .1 Then Yellow background and Dark Yellow Text

如果(分别处理)markers[i]["PropX"] >= .2 Then Red background and Dark Red Text

//pull data from json
jQuery.ajax({                              
url: myURL +  "map_data.php",
type: "JSON",
async: false,
success: function(data){
       markers = jQuery.parseJSON(data);
       jQuery(markers).each(function( index, element ) {        
       });
} 
}); 

......

//generate markers and layers from data 
for ( var i = 0; i < markers.length; ++i ) {
    //define popup data
    var popup = '<br/><b>Sample Name:</b> '+ markers[i]["Sample_Number"] +
              '<br/><b>Location Description:</b> ' + markers[i]["Location_Description"] +
              '<br/><b>Date Taken:</b> ' + markers[i].Date +
              '<br/><b>Classification:</b> ' + markers[i].Classification +
              '<br/><b>Number:</b> ' + markers[i]["Number"] +
              '<br/><b>Proportion 1:</b> ' + markers[i]["Prop1"] +
              '<br/><b>Proportion 2:</b> ' + markers[i]["Prop2"] +
              '<br/><b>Proportion 3:</b> ' + markers[i]["Prop3"] +
              '<br/><button onclick="window.location=`http://...data.php?sample_name='+ markers[i]["File_Name"] +'`" download="'+markers[i]["File_Name"]+' data.csv">Download Data</button>'    

    //define markers    
    var m = L.marker( [markers[i].Latitude, markers[i].Longitude], {icon: icons[markers[i].Classification]})
                  .bindPopup( popup );

    var data = {};            
    var name =  markers[i]["File_Name"];
    var latlng = L.latLng([markers[i].Latitude, markers[i].Longitude]);
    data.name = name;
    data.latlng = latlng;
    bulk_list.push(data);   


    //add data to layer groups
    category = markers[i].Classification;
    // Initialize the category array if not already set.
    if (typeof categories[category] === "undefined") {
    categories[category] = L.featureGroup.subGroup(parentGroup,m).addTo(map);
    layersControl.addOverlay(categories[category], category);
    }
    //add layers to map
    categories[category].addLayer(m);
}

弹出窗口将如下所示(应用突出显示规则):

Sample Name: S16
Location Description:place
Date Taken:
Classification: Unknown
Number: 149
Proportion 1: 0.11 #This line of text would be dark yellow with a yellow background
Proportion 2: 0.03
Proportion 3: 0.03

Sample Name: S17
Location Description:place
Date Taken:
Classification: Unknown
Number: 150 #This line of text would be dark yellow with a yellow background
Proportion 1: 0.11 #This line of text would be dark yellow with a yellow background
Proportion 2: 0.23 #This line of text would be dark red with a red background
Proportion 3: 0.03

Sample Name: S18
Location Description:place
Date Taken:
Classification: Unknown
Number: 255 #This line of text would be dark red with a red background
Proportion 1: 0.01
Proportion 2: 0.23 #This line of text would be dark red with a red background
Proportion 3: 0.13 #This line of text would be dark yellow with a yellow background

Answer 1

您可以直接在弹出窗口中添加一个 css 类。

    var numberclass = "";
    if(markers[i]["Number"] >= 250){
        numberclass = "redhighlight";
    }else if(markers[i]["Number"] >= 150){
        numberclass = "yellowhighlight";
    }

     var popup = '<br/><b>Sample Name:</b> '+ markers[i]["Sample_Number"] +
              '<br/><b>Location Description:</b> ' + markers[i]["Location_Description"] +
              '<br/><b>Date Taken:</b> ' + markers[i].Date +
              '<br/><b>Classification:</b> ' + markers[i].Classification +
              '<br/><span class="'+numberclass+'"><b>Number:</b> ' + markers[i]["Number"] +'</span>'+
              '<br/><span class="'+getPropColor(markers[i]["Prop1"])+'"><b>Proportion 1:</b> ' + markers[i]["Prop1"] +'</span>'+
              '<br/><span class="'+getPropColor(markers[i]["Prop2"])+'"><b>Proportion 2:</b> ' + markers[i]["Prop2"] +'</span>'+
              '<br/><span class="'+getPropColor(markers[i]["Prop3"])+'"><b>Proportion 3:</b> ' + markers[i]["Prop3"]+'</span>';

function getPropColor(value){
    if(value >= 0.2){
        return "yellowhighlight";
  }else if(value >= 0.1){
        return "redhighlight";
  }else{
    return "";
  }
}

CSS:

.redhighlight{
  background: red;
  color: darkred;
}

.yellowhighlight{
  background: yellow;
  color: orange;
}

我已经为您创建了一个示例:https://jsfiddle.net/falkedesign/s9d4na2t/