我有一个地址列表，当有人输入他们的邮政编码和距离邮政编码的里程数时，这些地址会被接收。
使用以下代码在垂直滚动列表中显示带回的列表：
$(".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似乎保留了这些值。因此，当我第一次发出警报时，警报器显示以下内容（点击了6次）：
totalItems 8 8 8 8 8 8
scrollval 130 130 130 130 130 130
currentscrollval 130 260 390 520 650 778
totalheight 778 778 778 778 778 778
但是在第二轮时，列表没有按顺序显示 - 因此它可能位于列表的一半，警报将显示（单击一次时）：
totalItems 8
scrollval 130
currentscrollval 130
总高度778
totalItems 31
scrollval 130
currentscrollval 350
总高度3768
因此，它会首先完成两次警报，首先将值从第一个列表中删除，然后将第二个列表中的值退回。
这个效果是列表没有从顶部开始，它似乎错过了列表中的项目，所以即使我在滚动它不在那里时检查元素时也能看到第3个列表项。
修改有关完整代码的更多详细信息：
<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对象中返回与邮政编码有一定距离的地址列表。
这一切都正常，直到用户向下滚动列表然后从下拉列表中选择一个新的距离 - 当发生这种情况时，地址列表没有显示propeleya这是当我得到的isssue我上面解释过（我希望这更有意义）
修改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，所以只添加新的，它仍然无法正常工作。
有什么想法吗？
谢谢
答案 0 :(得分：0)
似乎因为记住了地址滚动高度，它使列表位置错误，因此隐藏了一些列表项。为了解决这个问题，我确保通过在$（“＃distanceMiles”）之后执行以下操作将adressscroll设置回0。更改如下：
$(".addressscroll").scrollTop(0);
将其重置以便列表始终返回