我有一个地址列表，当有人输入他们的邮政编码和与邮政编码的距离（以英里为单位）时，该列表会被拾取。
使用以下代码将返回的列表显示在垂直滚动列表中：
$(".upHide").hide();
// get the number of .child elements
var totalitems;
var currentscrollval;
totalitems = $(".addressscroll .storeLi").length;
if (totalitems >= 2) {
$(".downHide").show();
}
// get the height of .w6392597
var scrollval = $('.storeLi').height();
// work out the total height.
var totalheight = (totalitems * scrollval) - ($(".addressscroll").height());
$(document).on("click", ".downHide", function () {
currentscrollval = $('.addressscroll').scrollTop();
alert("totalitems " + totalitems);
alert("scrollval " + scrollval);
alert("currentscrollval " + currentscrollval);
alert("totalheight " + totalheight);
$('.addressscroll').scrollTop(scrollval + currentscrollval);
// hide/show buttons
if (currentscrollval == totalheight) {
$(this).hide();
}
else {
$(".upHide").show();
}
}); $(document).on("click", ".upHide", function () {
var currentscrollval = parseInt($('.addressscroll').scrollTop());
$('.addressscroll').scrollTop(currentscrollval - scrollval);
// hide/show buttons
if ((scrollval + currentscrollval) == scrollval) {
$(this).hide();
}
else {
$(".downHide").show();
}
});
使用 html：
<div class="divAddress" style="display: block;">
<div id="up">
<img class="upHide" alt="top" src="http://static.e-talemedia.net/content/images/moreup.png" style="display: inline;">
</div>
<div class="addressscroll">
<ul id="locatorScroll">
<li class="storeLi">
<div class="singleadddress">
<p class="storeNameP">1 Hi Spek</p>
<p class="storeP">
<p class="linksP">
</div>
</li>
<li class="storeLi">
<div class="singleadddress">
<p class="storeNameP">2 A L Young</p>
<p class="storeP">
<p class="linksP">
</div>
</li>
..MORE LIST ITEMS HERE
</ul>
</div>
<div id="down">
</div>
</div>
这一切都运作良好。
但是，如果我向下滚动列表，然后更改以英里为单位的距离，则会返回一个新列表（我使用 AJAN 和 JSON 来检索列表），但 totalItems 和 CurrentScrollVal 似乎保留了这些值。因此，当我第一次放置警报时，alertsz 显示以下内容（单击 6 次）：
总计项目 8 8 8 8 8 8
滚动值 130 130 130 130 130 130
当前滚动值 130 260 390 520 650 778
总高度 778 778 778 778 778 778
但在第二轮中，列表未按顺序显示 - 因此它可能位于列表的一半，并且警报将显示（单击一次时）：
totalItems 8
scrollval 130
currentscrollval 130
totalheight 778
totalItems 31
scrollval 130
currentscrollval 350
totalheight 3768
所以它会通过警报两次首先将第一个列表中的值放入，然后将第二个列表中的值放入已带回的列表中。
这样做的效果是列表没有从顶部开始，它似乎错过了列表中的项目，所以即使当我检查元素时我可以看到第三个列表项，但当我滚动它时它不在那里。
编辑完整代码的更多细节：
<div class="maps">
<div class="divOuter">
<div class="divLocator">
<div class="topSection">
<div class="topSectionLeft">
<p class="storeP">
Please enter your Postcode
<input id="enterPostCode" type="text" /></p>
</div>
<div class="topSectionRight">
<p class="storeP">
Distance from your location
<select id="distanceMiles" name="distanceMilesChange">
<option value=""></option>
<option value="5">5 miles</option>
<option value="10">10 miles</option>
<option value="15">15 miles</option>
<option value="20">20 miles</option>
</select>
<input id="enterMiles" type="hidden" /></p>
</div>
<div id="hiddenPostMsg">
Please enter your postcode and then select a distance</div>
</div>
<div class="upgradeTab">
</div>
<div class="divMapsArea">
<div class="googleMaps">
<!-- Displays the Google Map which was defined in the initialize script above, and defines the map size on the screen -->
<div id="gmap_canvas">
</div>
</div>
<div class="divAddress">
<div id="up">
<img class="upHide" src="http://static.e-talemedia.net/content/images/moreup.png"
alt="top" /></div>
<div class="addressscroll">
<ul id="locatorScroll">
</ul>
</div>
<div id="down">
<img class="downHide" src="http://static.e-talemedia.net/content/images/moredown.png"
alt="top" /></div>
</div>
<div id="loading" style="display: none">
<img src="http://static.e-talemedia.net/content/images/ajax_loader_large.gif" alt="Loader" /><p>
Loading...</p>
</div>
</div>
</div>
</div>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCHqhrDdmkEFuDv55BeCK7nFkfYGdYSW20&sensor=false">
</script>
<script type="text/javascript">
//<![CDATA[
//if the postcode input field is clicked on the dropdown should clear
$("#enterPostCode").click(function () {
$("#distanceMiles").find('option:first').attr('selected', 'selected');
});
$("#hiddenPostMsg ").hide();
$(".divAddress").hide();
var map;
//set up the markers array so that we can clear them
var markers = [];
// Deletes all markers in the array by removing references to them.
function clearMarkers() {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
markers.length = 0;
};
function initialize() {
var zoomGrade = 10;
//create the google map
var mapProp = {
center: new google.maps.LatLng(51.694031, 0.04505),
zoom: zoomGrade,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("gmap_canvas"), mapProp);
//for some reason .change was firing twice and with the unbind it meant it only fired once
$('#distanceMiles').unbind();
$("#distanceMiles").change(function () {
//clear the old markers if there are any
clearMarkers();
$(".divAddress").hide();
$(".addressscroll ul").html('');
$("#distanceMiles option:selected").each(function () {
var manufacturerId = 109;
var postcodeEntered = $("#enterPostCode").val();
var milesEntered = $(this).val();
if (postcodeEntered != "" && milesEntered != "") {
$("#hiddenPostMsg ").hide();
var theUrl = "/Widgets/GetPostcodes/" + manufacturerId + "/" + postcodeEntered + "/" + milesEntered;
$.ajax({
type: "POST",
//contentType: "application/json; charset=utf-8",
url: theUrl,
data: { 'manufacturerId': manufacturerId, 'postcodeEntered': postcodeEntered, 'milesEntered': milesEntered },
dataType: "json",
success: function (data) {
for (var i = 0; i < data.length; i++) {
var item = data[i];
//the count goes next to the retailer so we know which marker is for which
var count = i + 1;
//to custom the markers i need to use the number we are on (i)
var iconurl = "https://where-to-buy.co/content/images/marker" + count + ".png";
//Sets the initial map location (latitude, longitude) in decimal degree format, and the zoom level (1 is zoomed out - 21 is farthest zoom in)
map.setZoom(item.ZoomLevel);
map.setCenter(new google.maps.LatLng(item.OriginalLat, item.OriginalLong));
//Close bracket to end the function named initialize !!!very important to not delete this!!!
//javascript that sets up variables that enable the map to draw a custom icon.
var marker = new google.maps.Marker({
position: new google.maps.LatLng(item.StoreLat, item.StoreLong),
icon: iconurl,
map: map
});
marker.setMap(map);
//put into an array so that they clear
markers.push(marker);
//End of add marker code
var showDistance = item.Distance.toFixed(2);
//now i need to create a list that will display on the right hand side inside .addressscroll
$(".addressscroll ul").append("<li class =\"storeLi\"><div class=singleadddress><p class=\"storeNameP\">" + count + " " + item.StoreName + "</p><p class=\"storeP\">" + item.Address1 + "<br/>" + item.TownCity + " " + item.Postcode + "<br/>" + item.Telephone + "<br/>" + showDistance + " miles</p><p class =\"linksP\" ><a class =\"storeA\" href = \"https://www.google.com/maps?q=" + item.MapsPostcode + "\" target=\"_blank\" >Display Map | </a><a class =\"storeA\" href = \"https://maps.google.co.uk/maps?f=d&hl=en&geocode=&saddr=" + item.OriginalMapsPostcode + "&daddr=" + item.MapsPostcode + "\" target=\"_blank\" >Display Route</a></p></div></li> ");
//Creates a directions object and registers a map and DIV to hold the resulting computed directions
// var directionsPanel;
// var directions;
// directionsPanel = document.getElementById("my_directions_div");
// directions = new GDirections(gmap, directionsPanel);
// //Specify the FROM and TO for your directions: postcode to postcode
// directions.load("from: "+ item.OriginalPostcode +", to: "+ item.Postcode + "");
}
$(".divAddress").show();
$(".upHide").hide();
// get the number of .child elements
var totalitems;
var currentscrollval;
totalitems = $(".addressscroll .storeLi").length;
if (totalitems >= 2) {
$(".downHide").show();
}
// get the height of .w6392597
var scrollval = $('.storeLi').height();
// work out the total height.
var totalheight = (totalitems * scrollval) - ($(".addressscroll").height());
$(document).on("click", ".downHide", function () {
currentscrollval = $('.addressscroll').scrollTop();
// alert("totalitems " + totalitems);
// alert("scrollval " + scrollval);
// alert("currentscrollval " + currentscrollval);
// alert("totalheight " + totalheight);
$('.addressscroll').scrollTop(scrollval + currentscrollval);
// hide/show buttons
if (currentscrollval == totalheight) {
$(this).hide();
}
else {
$(".upHide").show();
}
}); $(document).on("click", ".upHide", function () {
var currentscrollval = parseInt($('.addressscroll').scrollTop());
$('.addressscroll').scrollTop(currentscrollval - scrollval);
// hide/show buttons
if ((scrollval + currentscrollval) == scrollval) {
$(this).hide();
}
else {
$(".downHide").show();
}
});
if (totalitems == 0) {
$(".downHide").hide();
$("#hiddenPostMsg ").show();
$("#hiddenPostMsg ").text("Invalid Postcode. Please try again");
}
}
});
}
else if (postcodeEntered == "") {
//here i want to clear the dropdown aswel
$("#hiddenPostMsg ").show();
$("#hiddenPostMsg ").text("Please enter your postcode and then select a distance");
$("#distanceMiles").find('option:first').attr('selected', 'selected');
}
});
});
}
google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.trigger(map, 'resize');
</script>
<!-- Signals to the browser that a section of javascript follows, and to read accordingly -->
<script type="text/javascript">
//<![CDATA[
// Bind my loading div to the ajax send and complete functions
$().ready(function () {
$("#loading").bind("ajaxSend", function () {
$(this).show();
}).bind("ajaxComplete", function () {
$(this).hide();
});
});
//]]>
</script>
<!-- Signals to the browser that a section of javascript follows, and to read accordingly -->
<script type="text/javascript">
//<![CDATA[
// Bind my loading div to the ajax send and complete functions
$().ready(function () {
$("#loading").bind("ajaxSend", function () {
$(this).show();
}).bind("ajaxComplete", function () {
$(this).hide();
});
});
//]]>
</script>
<!-- Signals to the browser that a section of javascript follows, and to read accordingly -->
<%-- <%= Html.GoogleMapsScriptsReturnPostcodeData(Model)%>--%>
</div>
此页面的作用是：用户输入邮政编码并从下拉列表中选择以英里为单位的距离 - 当用户选择 jquery 启动的距离并通过 AJAX 将信息发送到控制器 (MVC3) 以带回JSON 对象是与邮政编码一定距离的地址列表。
这一切正常，直到用户向下滚动列表，然后从下拉列表中选择一个新距离 - 当发生这种情况时，地址列表没有被显示，这是我遇到上面解释的问题的时候（我希望这更有意义）
编辑 2
我真正想做的是确保在这次通话中：
$("#distanceMiles").change(function () {
没有留下以前的值 - 特别是对于 totalItems 和 currentscrollval
编辑 3
是的，我想我正在查看代码的一部分，我认为这是因为我正在附加代码而不是替换它：
$(".addressscroll ul").replace("<li class =\"storeLi\"><div class=singleadddress><p class=\"storeNameP\">" + count + " " + item.StoreName + "</p><p class=\"storeP\">" + item.Address1 + "<br/>" + item.TownCity + " " + item.Postcode + "<br/>" + item.Telephone + "<br/>" + showDistance + " miles</p><p class =\"linksP\" ><a class =\"storeA\" href = \"https://www.google.com/maps?q=" + item.MapsPostcode + "\" target=\"_blank\" >Display Map | </a><a class =\"storeA\" href = \"https://maps.google.co.uk/maps?f=d&hl=en&geocode=&saddr=" + item.OriginalMapsPostcode + "&daddr=" + item.MapsPostcode + "\" target=\"_blank\" >Display Route</a></p></div></li> ");
所以只需要弄清楚如何检查它是否存在如果它不存在我需要附加如果它确实存在我需要替换。
编辑 4
实际上不确定这是否是我添加的问题
$("#distanceMiles").change(function () {
//I want to remove the list if there is one
//check if storeLi exist if it does replace if not append
if ($(".storeLi").length > 0) {
$(".addressscroll ul").empty();
}
即使这清空了 ul 所以只添加了新的，它仍然不起作用。
有任何想法吗？
谢谢