[英]Working with star drop down list with ajax call
The web page has users select a start rating for the difficulty of hike they would like to go on, and uses that and another params to do an ajax call from a hiking api. The web page has users select a start rating for the difficulty of hike they would like to go on, and uses that and another params to do an ajax call from a hiking api. I need help with giving the star rating they click a numerical value so I can make it a param(minstars) in the ajax call.我需要帮助他们点击一个数值给星级评分,以便我可以在 ajax 调用中将其设为参数(minstars)。
<div class="column">
<div class="field">
<label class="label">Whats the minimum rating for your hike?</label>
<div class="control">
<div class="select minStar">
<select>
<option>0 stars</option>
<option>⭐</option>
<option>⭐⭐</option>
<option>⭐⭐⭐</option>
<option>⭐⭐⭐⭐</option>
</select>
</div>
</div>
</div>
</div>
</div>
<button class="button is-link" id="submitButton">Search</button>
navigator.geolocation.getCurrentPosition(function (location) {
var maxDistance;
var minLength;
var minStars;
var apiKey = "key=200749192-819757ad274cc592a221c4c70b9c441e";
var i = 0;
var trails;
$("button").on("click", getTrails);
function getTrails(event) {
maxDistance = $(".maxDistance").val();
minLength = $(".minLength").val();
console.log(location.coords.longitude);
console.log($(".minStar").val());
console.log(maxDistance);
console.log(minLength);
var queryURL = "https://www.hikingproject.com/data/get-trails?" +
"lat=" + location.coords.latitude + "&lon=" + location.coords.longitude +
"&maxDistance=" + maxDistance + "&minLength=" + minLength + "&minStars=" + minStars + "&" + apiKey;
event.preventDefault();
$.ajax({
url: queryURL,
method: "GET"
})
.then(function (response) {
trails = response.trails
console.log(queryURL)
$(".name").html("Trail Name: " + response.trails[i].name);
$(".location").html("Location: " + response.trails[i].location);
$(".ascent").text("Ascent: " + response.trails[i].ascent + "ft");
$(".descent").text("Descent: " + response.trails[i].descent + "ft");
$(".length").text("Length: " + response.trails[i].length + "mi");
$(".stars").text("Stars: " + response.trails[i].stars);
parseDifficulty(response.trails[i].difficulty);
i++;
if (i === trails.length) {
i = 0
}
fetchWeather(response.trails[i].location);
});
}
You can add values to the stars by adding value
attributes to each of them.您可以通过为每个星星添加value
属性来为星星添加值。 It would look like so:它看起来像这样:
<option value="0">0 stars</option>
<option value="1">⭐</option>
<option value="2">⭐⭐</option>
<option value="3">⭐⭐⭐</option>
<option value="4">⭐⭐⭐⭐</option>
You'd then get the value selected by doing this:然后,您将通过执行以下操作获得选择的值:
$("minStar").children("option:selected").val();
You could set a listener for it to change the value automatically as well: (Note -- You'd have to declare the variable globally so the function you call has access to it)您也可以为其设置一个侦听器以自动更改值:(注意 - 您必须全局声明变量,以便您调用的 function 可以访问它)
$("minStar").change(function(){
minStarRating = $(this).children("option:selected").val();
You are trying to get a value from a div.您正在尝试从 div 中获取值。 I would try moving the ckass to the select element.我会尝试将 ckass 移动到 select 元素。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.