基本的javascript函数
Basic javascript function
本文关键字:函数 javascript 更新时间:2023-09-26
我有这个功能可以工作
<script type="text/javascript">
$(window).scroll(function() {
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
$('div#loadmoreajaxloader').show();
$.ajax({
url: "loadmore.php?wall=<?php echo $wall; ?>&lastid=" + $(".postitem:last").attr("id"),
success: function(html) {
if (html) {
$("#postswrapper").append(html);
$('div#loadmoreajaxloader').hide();
} else {
$('div#loadmoreajaxloader').html('<center><font color="white">No more posts to show.</font></center>');
}
}
});
}
});
</script>
但我需要(在IOS设备上)发生同样的事情,但我只需要在链接上的onclick
事件上发生,而不是在浏览器到达loadmoreajaxeloader
div时发生。非常感谢。
尝试添加代码,但没有格式化,所以在这里http://pastebin.com/p2VUqZff
您需要将Ajax和滚动事件分开。
所以创建一个函数来加载这样的内容:
// Create the load content function
function loadContent(){
$.ajax({
url: "loadmore.php?wall=<?php echo $wall; ?>&lastid=" + $(".postitem:last").attr("id"),
success: function(html){
if(html){
$("#postswrapper").append(html);
$('div#loadmoreajaxloader').hide();
}else{
$('div#loadmoreajaxloader').html('<center><font color="white">No more posts to show.</font></center>');
}
}
});
}
然后将滚动事件绑定到窗口:
// Set the onscroll event
$(window).scroll(function(){
if($(window).scrollTop()==$(document).height()-$(window).height()){
$('div#loadmoreajaxloader').show();
// IF YOU WANT TO LOAD MORE CONTENT WHEN SCROLLING THEN UNCOMMENT THE NEXT LINE
// loadContent();
}
});
然后设置Load More链接的onclick事件:
// Bind the click event to the Load More link
$('#loadMore').click(function(e){
// This will prevent any default action
e.preventDefault();
// Load the content
loadContent();
});
更新
我忘了确保在加载页面后分配事件。用以下内容包围您的所有javascript:
$(document).ready(function(){
// PUT ALL THE JAVASCRIPT HERE
});
如果你想让代码在滚动和点击链接时都能执行,你可以把通用代码放在一个函数中,你可以从所有需要的地方调用它:
function doStuff() {
$.ajax({
url: "loadmore.php?wall=<?php echo $wall; ?>&lastid=" + $(".postitem:last").attr("id"),
success: function(html) {
if (html) {
$("#postswrapper").append(html);
$('div#loadmoreajaxloader').hide();
} else {
$('div#loadmoreajaxloader').html('<center><font color="white">No more posts to show.</font></center>');
}
}
});
}
$(window).scroll(function() {
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
$('div#loadmoreajaxloader').show();
doStuff();
}
});
$("#idOfYourLinkGoesHere").click(function() {
doStuff();
return false;
});
请注意,从单击处理程序返回false将停止单击链接的默认行为(即,防止其离开当前页面或移回页面顶部)。
我不确定.show()
是否发生在链接中,所以我把它留在了滚动处理程序中。如果它适用于任何一种情况,则将其移动到doStuff()
函数中。
尝试用类似的东西替换滚动部件:
$('a#moreLoader').click(function() {
$('div#loadmoreajaxloader').show();
$.ajax({
url: "loadmore.php?wall=<?php echo $wall; ?>&lastid=" + $(".postitem:last").attr("id"),
success: function(html) {
if (html) {
$("#postswrapper").append(html);
$('div#loadmoreajaxloader').hide();
} else {
$('div#loadmoreajaxloader').html('<center><font color="white">No more posts to show.</font></center>');
}
}
});
return false;
});
其中a#moreLoader
是id为"moreLoader"的链接:
<a id="moreLoader" href="#">load more</a>
我想你要问的是"当点击链接时,我如何重用这个功能"-如果是这样,答案是:
<script type="text/javascript">
// Declare the AJAX action as a separate function
var loadMoreContent = function() {
$.ajax({
url: "loadmore.php?wall=<?php echo $wall; ?>&lastid=" + $(".postitem:last").attr("id"),
success: function(html) {
if (html) {
$("#postswrapper").append(html);
$('div#loadmoreajaxloader').hide();
} else {
$('div#loadmoreajaxloader').html('<center><font color="white">No more posts to show.</font></center>');
}
}
});
};
$(window).scroll(function() {
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
$('div#loadmoreajaxloader').show();
loadMoreContent(); // Just call the separate function here
}
});
// ...and attach the function as a click handler to the link:
$('#idOfMyLink').click(function() {
loadMoreContent(); // Just call the separate function here
return false; // Return false to prevent navigation away from the page
});
</script>
相关文章:
- 从函数JavaScript返回不可变数组/对象
- 将对象传递给函数.JavaScript
- 如何定义const函数javascript(语法糖)
- 新的日期函数javascript
- TypeError:this.getAttribute不是一个函数-javascript
- 从函数javascript发送变量
- 扩展自容器函数Javascript
- 从内部函数javascript内部分配外部函数的对象
- 使用函数JavaScript中的函数
- 在这里使用回调函数(JavaScript)有什么好处吗
- 来自函数 Javascript 的 NaN 返回值 ||函数执行顺序
- 将“e”传递给一个新函数 - javascript
- 调用函数中的一个函数——Javascript
- 传递的变量不适用于我的函数-Javascript
- 如何将类方法设置为等于多个函数?-Javascript
- 显示php中的函数javascript
- 如何使用php代码创建函数Javascript弹出框
- 未调用的外部函数-javascript
- 如何在类中运行函数.Javascript
- 关闭mouseover上的一个函数——Javascript,jQuery