无效的字符串长度错误

Question

我在我的视图中有地图

在标记的弹出窗口中，我显示信息

在json[i].rating中，我的数字从1到5，现在我显示它。但我需要显示评级星形图像，例如这个

因此，如果我的评分为2，我需要有两颗星。

我如何正确地做到这一点？

这是我现在拥有的工作片段

＆＃13;

＆＃13;

$(function() {
  const json = [{
    "name": "Park Hotel",
    "address1": "327 Cranbrook Road",
    "rating": 2,
    "lng": 0.065,
    "lat": 51.568,
    "pictures": [{
        "url": "https://aobtravel.s3.amazonaws.com/hotelpictures/003/623/222/LON-91B-1.jpg?1387213390",
        "description": "Exterior"
      },
      {
        "url": "https://aobtravel.s3.amazonaws.com/hotelpictures/003/623/225/LON-91B-2.jpg?1387213390",
        "description": "Lobby"
      },
      {
        "url": "https://aobtravel.s3.amazonaws.com/hotelpictures/003/623/227/LON-91B-3.jpg?1387213390",
        "description": "Lobby"
      },
      {
        "url": "https://aobtravel.s3.amazonaws.com/hotelpictures/003/623/230/LON-91B-4.jpg?1387213391",
        "description": "Lobby"
      },
      {
        "url": "https://aobtravel.s3.amazonaws.com/hotelpictures/003/623/232/LON-91B-5.jpg?1387213391",
        "description": "Guest Room"
      }
    ],
    "sales_price": 2847
  }];
  const star = `
<img src="https://res.cloudinary.com/dzwdseno3/image/asset/f_auto/star-bb0cd011d3d4aa12c83109f30c6c17ed.png">
`;
  const token = 'pk.eyJ1IjoibmVtZXNpc2VzIiwiYSI6ImNqaDlqaDQycTA1ZnEzY3BpbDZpNHk1c2EifQ.KbuJOIjYh6VrWYo48yxETg';

  mapboxgl.accessToken = token;

  let map = new mapboxgl.Map({
    container: 'map-canvas',
    style: 'mapbox://styles/mapbox/streets-v9',
    center: [0.065, 51.568],
    zoom: 3
  });

  map.addControl(new mapboxgl.NavigationControl());
  $.each(json, function(i, item) {
    let myLatlng = new mapboxgl.LngLat(json[i].lng, json[i].lat);
  let stars = '';
for(let s = 0; i < json[i].rating; s++) {
    stars += star;
}
    let marker = new mapboxgl.Marker()
      .setLngLat(myLatlng)
      .setPopup(new mapboxgl.Popup({
          offset: 25
        })
        .setHTML('<h3 class="hotel_name">' + json[i].name + '</h3><p class="adress-text-hotel">' + json[i].address1 + '</p>' + '</h3><p class="rating-title">Reting: ' + json[i].rating + '</p>' + '</h3><p class="price-text-hotel" >Price ' + stars + '</p>'))
      .addTo(map);


  });
});

＆＃13;

html,
body,
#map-canvas {
  height: 500px;
  margin: 0px;
  padding: 0px
}

#map-canvas {
  width: 800px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.css' rel='stylesheet' />

<div id="map-canvas"></div>

＆＃13;

＆＃13;

＆＃13;

我试过这个例子，我有

  

无效的字符串长度错误

Answer 1

看来你正在寻找：

star.repeat(json[i].rating)

这对你有用吗？

Answer 2

示例：

＆＃13;

＆＃13;

var hotels = [
	{
  	name: 'Hotel-1',
    rating: 3
  },
  {
  	name: 'Hotel-2',
    rating: 5
  }
];

var content = document.querySelector('.content');

hotels.forEach(function(hotel) {

	// Add div.star's depending on rate
	var htmlStars = "";
  for (var i = 0; i < hotel.rating; i++) {
  	htmlStars += '<div class="star"></div>';
  }
  
	var htmlHotel = `<div class="hotel">
  	<span>${hotel.name}</span>
  	${htmlStars}
  </div>
  `;

  content.insertAdjacentHTML('beforeend', htmlHotel);
});

＆＃13;

.hotel span {
  font-size: 2em;
}

.star {
  display: inline;
}

.star::after {
  content: url('https://res.cloudinary.com/dzwdseno3/image/asset/f_auto/star-bb0cd011d3d4aa12c83109f30c6c17ed.png');
}

＆＃13;

<div class="content">
</div>

＆＃13;

＆＃13;

＆＃13;