jquery css颜色正在改变每个选择器，但字体大小不是？

-1

我与谷歌地图的工作，我有标记的数组，它看起来像这样：jquery css颜色正在改变每个选择器，但字体大小不是？

var locations = [ 
     [{ 
      id: 1, 
      lat: 51.5239935252832, 
      lng: 5.137663903579778, 
      content: 'Kids Jungalow (5p)' 
     }], 
     [{ 
      id: 2, 
      lat: 51.523853342911906, 
      lng: 5.1377765563584035, 
      content: 'Kids Jungalow (5p)' 
     }], 
     [{ 
      id: 3, 
      lat: 51.5237298485607, 
      lng: 5.137969675407476, 
      content: 'Kids Jungalow (5p)' 
     }], 
     [{ 
      id: 4, 
      lat: 51.52355628836575, 
      lng: 5.138066234932012, 
      content: 'Kids Jungalow (5p)' 
     }], 
     [{ 
      id: 5, 
      lat: 51.52340275379578, 
      lng: 5.138211074218816, 
      content: 'Kids Jungalow (5p)' 
     }], 
     [{ 
      id: 6, 
      lat: 51.523199152806626, 
      lng: 5.138382735595769, 
      content: 'Kids Jungalow (5p)' 
     }], 
     [{ 
      id: 7, 
      lat: 51.5229955509073, 
      lng: 5.138511481628484, 
      content: 'Kids Jungalow (5p)' 
     }], 
     [{ 
      id: 8, 
      lat: 51.52280529912936, 
      lng: 5.138543668136663, 
      content: 'Kids Jungalow (5p)' 
     }], 
     [{ 
      id: 9, 
      lat: 51.523596340777075, 
      lng: 5.138463201866216, 
      content: 'Kids Jungalow (5p)' 
     }], 
     [{ 
      id: 700, 
      lat: 51.523372714362736, 
      lng: 5.1386992362595265, 
      content: 'Kids Jungalow (5p)' 
     }], 
     [{ 
      id: 101, 
      lat: 51.52329594683302, 
      lng: 5.138838711128301, 
      content: 'Kids Jungalow Giraffe' 
     }]

比我环槽标记列阵和一个HTML标记组这样的每一个位置：

for (i = 0; i < locations.length; i++) { 
    var myLatLng = new google.maps.LatLng({ 
     lat: locations[i][0].lat, 
     lng: locations[i][0].lng 
    }); 
    var number = locations[i][0].id; 
    var marker_html = '<div id="' + number + '"><div class="rich-marker"><span class="number-id">' + number + '</span></div></div>'; 

    var marker = new RichMarker({ 
     position: myLatLng, 
     map: map, 
     flat: true, 
     anchor: RichMarkerPosition.MIDDLE, 
     content: marker_html 
    }); 
}

比我想改变类number-id的CSS样式缩放级别18这样的：

map.addListener('zoom_changed', function() { 
     // Limit the zoom level 
     if (map.getZoom() < minZoomLevel) map.setZoom(minZoomLevel); 

     // for loop door locaties 
     for (i = 0; i < locations.length; i++) { 
      setMarkerSize(i); 
     } 
    }); 

    function setMarkerSize(i) { 
     var infobox = locations[i][0].infobox; 
     var id = locations[i][0].id; 

     if (map.getZoom() === 18) { 
      $('.rich-marker').css({ 'display' : 'block', 'width' : '20px', 'height' : '20px' }); 
      $('.number-id').css({ 'display' : 'block', 'font-size' : '12px'}); 

      if (id >= 100) { 
       console.log(id); 
       console.log($('[data-id="' + id + '"]')); 

       $('#' + id).find('.number-id').css('font-size', '10px'); 
       $('#' + id).find('.number-id').css('color', 'red'); 
      } 

      infobox.setOptions({ pixelOffset: new google.maps.Size(-93, -22) }); 
     } 

    }

的颜色是改变所有100以上，但字体大小只改变为数组中的最后一个对象为什么？

来源

2016-05-17 Sreinieren

'如果（ID> = 100）{'这里其中是的'id'从未来值？ – dreamweiver

@dreamweiver抱歉忘了提及一个 – Sreinieren

因为id不是在循环中构造的，所以它的值在if内部是常量，所以选择器$（'＃'+ id）.find（'。number-id'）'会只有唯一的值，因为使用了id选择器，这意味着css将无法应用于具有id> = 100的所有元素。 – dreamweiver

每次在循环处理标记时要设置所有font-size属性12px的：

$('.number-id').css({ 
    'display': 'block', 
    'font-size': '12px' 
    });

然后，设置当前标记为“10px的”的font-size。这只剩下最后一个你设置为“10px”。

proof of concept fiddle

代码片断：

var geocoder; 
 
var map; 
 

 
function initialize() { 
 
    var map = new google.maps.Map(
 
    document.getElementById("map_canvas"), { 
 
     center: new google.maps.LatLng(37.4419, -122.1419), 
 
     zoom: 17, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 
    var bounds = new google.maps.LatLngBounds(); 
 
    for (i = 0; i < locations.length; i++) { 
 
    var myLatLng = new google.maps.LatLng({ 
 
     lat: locations[i][0].lat, 
 
     lng: locations[i][0].lng 
 
    }); 
 
    bounds.extend(myLatLng); 
 
    var number = locations[i][0].id; 
 
    var marker_html = '<div id="' + number + '"><div class="rich-marker"><span class="number-id">' + number + '</span></div></div>'; 
 

 
    var marker = new RichMarker({ 
 
     position: myLatLng, 
 
     map: map, 
 
     flat: true, 
 
     anchor: RichMarkerPosition.MIDDLE, 
 
     content: marker_html 
 
    }); 
 
    } 
 
    map.setCenter(bounds.getCenter()); 
 
    var minZoomLevel = 18; 
 
    map.addListener('zoom_changed', function() { 
 
    document.getElementById('zoom').innerHTML = map.getZoom(); 
 

 
    // Limit the zoom level 
 
    if (map.getZoom() < minZoomLevel) map.setZoom(minZoomLevel); 
 

 
    // for loop door locaties 
 
    for (i = 0; i < locations.length; i++) { 
 

 
     setMarkerSize(i); 
 
    } 
 
    }); 
 

 
    function setMarkerSize(i) { 
 
    var infobox = locations[i][0].infobox; 
 
    var id = locations[i][0].id; 
 

 
    if (map.getZoom() === 18) { 
 
     $('.rich-marker').css({ 
 
     'display': 'block', 
 
     'width': '20px', 
 
     'height': '20px' 
 
     }); 
 
     /* $('.number-id').css({ 
 
     'display': 'block', 
 
     'font-size': '12px' 
 
     }); */ 
 

 
     if (id >= 100) { 
 
     console.log(id); 
 
     console.log($('[data-id="' + id + '"]')); 
 

 
     $('#' + id).find('.number-id').css('font-size', '18px'); 
 
     $('#' + id).find('.number-id').css('color', 'red'); 
 
     } 
 

 
     /* infobox.setOptions({ 
 
     pixelOffset: new google.maps.Size(-93, -22) 
 
     }); */ 
 
    } 
 

 
    } 
 
} 
 
google.maps.event.addDomListener(window, "load", initialize); 
 
var locations = [ 
 
    [{ 
 
    id: 1, 
 
    lat: 51.5239935252832, 
 
    lng: 5.137663903579778, 
 
    content: 'Kids Jungalow (5p)' 
 
    }], 
 
    [{ 
 
    id: 2, 
 
    lat: 51.523853342911906, 
 
    lng: 5.1377765563584035, 
 
    content: 'Kids Jungalow (5p)' 
 
    }], 
 
    [{ 
 
    id: 3, 
 
    lat: 51.5237298485607, 
 
    lng: 5.137969675407476, 
 
    content: 'Kids Jungalow (5p)' 
 
    }], 
 
    [{ 
 
    id: 4, 
 
    lat: 51.52355628836575, 
 
    lng: 5.138066234932012, 
 
    content: 'Kids Jungalow (5p)' 
 
    }], 
 
    [{ 
 
    id: 5, 
 
    lat: 51.52340275379578, 
 
    lng: 5.138211074218816, 
 
    content: 'Kids Jungalow (5p)' 
 
    }], 
 
    [{ 
 
    id: 6, 
 
    lat: 51.523199152806626, 
 
    lng: 5.138382735595769, 
 
    content: 'Kids Jungalow (5p)' 
 
    }], 
 
    [{ 
 
    id: 7, 
 
    lat: 51.5229955509073, 
 
    lng: 5.138511481628484, 
 
    content: 'Kids Jungalow (5p)' 
 
    }], 
 
    [{ 
 
    id: 8, 
 
    lat: 51.52280529912936, 
 
    lng: 5.138543668136663, 
 
    content: 'Kids Jungalow (5p)' 
 
    }], 
 
    [{ 
 
    id: 9, 
 
    lat: 51.523596340777075, 
 
    lng: 5.138463201866216, 
 
    content: 'Kids Jungalow (5p)' 
 
    }], 
 
    [{ 
 
    id: 700, 
 
    lat: 51.523372714362736, 
 
    lng: 5.1386992362595265, 
 
    content: 'Kids Jungalow (5p)' 
 
    }], 
 
    [{ 
 
    id: 101, 
 
    lat: 51.52329594683302, 
 
    lng: 5.138838711128301, 
 
    content: 'Kids Jungalow Giraffe' 
 
    }] 
 
];

html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&ext=.js"></script> 
 
<script src="https://cdn.rawgit.com/googlemaps/js-rich-marker/gh-pages/src/richmarker.js"></script> 
 
<div id="zoom"></div> 
 
<div id="map_canvas"></div>

来源

2016-05-17 23:07:24 geocodezip

jquery css颜色正在改变每个选择器，但字体大小不是？

回答

相关问题