Question

我有两个loadmore脚本，每个脚本都由不同的按钮调用。但第二个按钮加载应该由第一个按钮加载的内容，而第一个按钮工作正常。

这就是我的html设置（只有相关代码没有内部的php等）

Private Sub Example()
    Dim counter As Integer = 1
    Dim input As String = @"
        <-NewItems->
        Alpha
        Omega
        Beta
        <-NewItems->
        Delta
        Gamma
        Epsilon
        <-NewItems->
        Something
        Something"

    For Each content In input.Split({"<-NewItems->"}, StringSplitOptions.RemoveEmptyEntries)
        My.Computer.FileSystem.WriteAllText($"somefolder/myfile{counter}.txt", content, True)
        counter += 1
    Next
End Sub

在页脚中加载了这些脚本：

<div class="row" id="loadprojects">
    <div class="col-md-2 col-md-offset-5" id="loadmoreprojects">
        <a href="javascript:;"><button class="btn btn-info">Bekijk meer projecten</button></a>
    </div>
</div>

<div class="row" id="loadnews">
    <div class="col-md-2 col-md-offset-5" id="loadmore">
        <a href="javascript:;"><button class="btn btn-info">Bekijk meer websites</button></a>
    </div>
</div>

这些是我的两个脚本：

（loadmore.js）

<script src="assets/js/loadmore.js"></script>
<script src="assets/js/loadmore_projects.js"></script>

（loadmore_projects.js）

/*
Meer websites laden
*/
var limit = 3;

$('#loadmore').click(function() {
    limit += 3;

    ajax();

});

var posts = document.getElementById('loadnews');

function ajax() {
    $.ajax({
    url: 'includes/loadmore.php',
    type: "POST",
    data: {limit: limit},
    success: function(data){
        loadnews.innerHTML = data;
    },
    error: function(jqXHR, exception) {
              if (jqXHR.status === 0) {
                   alert('Not connect.\n Verify Network.');
               } else if (jqXHR.status == 404) {
                   alert('Requested page not found. [404]');
               } else if (jqXHR.status == 500) {
                   alert('Internal Server Error [500].');
               } else if (exception === 'parsererror') {
                   alert('Requested JSON parse failed.');
               } else if (exception === 'timeout') {
                   alert('Time out error.');
               } else if (exception === 'abort') {
                   alert('Ajax request aborted.');
               } else {
                   alert('Uncaught Error.\n' + jqXHR.responseText);
               }
           }
    }); 
}

ajax();

我检查了所有名字，为什么当我点击第二个按钮时，第一个脚本被启动了？而不是与按钮具有相同id的正确的那个。

Answer 1

解释。

为了避免变量覆盖，我们可以像这样使用immidiatly invoke函数声明：

(function(){}(
..code goes there
));

由于所有函数都有自己的可见范围，因此来自其他函数的变量将不会看到此变量，也不会覆盖它们。此外，您可以改进代码，添加“使用严格”模式，使您的代码行为更加清晰。只需写下这样的smth：

(function(){}(
'use strict';

..code goes there
));

尝试yto总是用函数包装代码以避免使用全局变量。

尝试使用这样的变体：

(function(){
/*
Meer websites laden
*/
var limit = 3;

$('#loadmore').click(function() {
    limit += 3;

    ajax();

});

var posts = document.getElementById('loadnews');

function ajax() {
    $.ajax({
    url: 'includes/loadmore.php',
    type: "POST",
    data: {limit: limit},
    success: function(data){
        loadnews.innerHTML = data;
    },
    error: function(jqXHR, exception) {
              if (jqXHR.status === 0) {
                   alert('Not connect.\n Verify Network.');
               } else if (jqXHR.status == 404) {
                   alert('Requested page not found. [404]');
               } else if (jqXHR.status == 500) {
                   alert('Internal Server Error [500].');
               } else if (exception === 'parsererror') {
                   alert('Requested JSON parse failed.');
               } else if (exception === 'timeout') {
                   alert('Time out error.');
               } else if (exception === 'abort') {
                   alert('Ajax request aborted.');
               } else {
                   alert('Uncaught Error.\n' + jqXHR.responseText);
               }
           }
    }); 
}

ajax();
}());

(function(){
/*
Meer projecten laden
*/
var limit = 4;

$('#loadmoreprojects').click(function() {
    limit += 4;

    ajax();

});

var posts1 = document.getElementById('loadprojects');

function ajax() {
    $.ajax({
    url: 'includes/loadmore_projects.php',
    type: "POST",
    data: {limit: limit},
    success: function(data){
        loadprojects.innerHTML = data;
    },
    error: function(jqXHR, exception) {
              if (jqXHR.status === 0) {
                   alert('Not connect.\n Verify Network.');
               } else if (jqXHR.status == 404) {
                   alert('Requested page not found. [404]');
               } else if (jqXHR.status == 500) {
                   alert('Internal Server Error [500].');
               } else if (exception === 'parsererror') {
                   alert('Requested JSON parse failed.');
               } else if (exception === 'timeout') {
                   alert('Time out error.');
               } else if (exception === 'abort') {
                   alert('Ajax request aborted.');
               } else {
                   alert('Uncaught Error.\n' + jqXHR.responseText);
               }
           }
    }); 
}

ajax();
}());

Answer 2

您正在定义两个具有相同名称ajax（）的函数，更改其中一个函数。

只有一个ajax脚本可以工作，而我有两个

2 个答案: