每个选择器的Jquery css颜色都在变化,但字体大小却没有变化
Jquery css color is changing for every selector, but font-size is not?
我正在使用谷歌地图,我有一组标记,看起来像这样:
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
});
}
然后我想在缩放级别18上更改类number-id
的css样式,如下所示:
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以上都在变化,但字体大小只在数组中最后一个对象的情况下变化,为什么??
每次处理循环中的标记时,都会将所有font-size
属性设置为12px:
$('.number-id').css({
'display': 'block',
'font-size': '12px'
});
然后将当前标记的font-size
设置为"10px"。这只剩下最后一个你设置为"10px"。
概念验证小提琴
代码片段:
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>
相关文章:
- 每个选择器的Jquery css颜色都在变化,但字体大小却没有变化
- 根据元素高度和宽度的百分比变化增加或减少字体大小
- 如何在呈现页面后使用 Java 脚本检测 dom 元素值的值是否有任何变化(例如,任何输入或复选框值更改)
- 为什么 HTML 文本字段的值在有逗号时会发生变化
- Raphael JS中的动画字体大小是否有流畅的转换可能性
- 有没有人知道如何检测 Nativescript 的方向变化
- jQuery:滚动时平滑动画字体大小变化
- 在夏季笔记中更改字体大小非常有问题
- 有没有办法防止选择菜单在值动态变化时关闭
- 有没有一种简单的方法来检测容器元素中的焦点变化
- 版本 2 和 3 之间的上传 API 有哪些主要变化
- 使用未知数量的案例进行切换 - 略有变化的默认情况
- 剑道网格有变化,如何处理只读网格
- backbone.js:自上次服务器保存以来有变化吗
- 菜单上滚动的活动类-如何添加字体颜色和字体大小变化的活动类
- 如果文本框中有变化,则模糊
- 如何组合两个相似的脚本,并在略有变化的情况下运行它
- 检查窗口大小是否有变化和性能/优化
- 如何知道日期是否有变化的日期picker jQuery
- 当有变化时,自动更新所有用户的HTML dom