Question

我正在尝试制作菜单。单击每个项会导致AJAX调用，该调用返回具有某些值的对象。在我再次显示菜单的某些操作之后，在单击任何项目之后，再次执行AJAX调用并返回对象与其他价值观。我对该对象/值有问题，因为它们在回调函数中没有改变。只有数组中的第一项是新的。

我很抱歉我的英语不好，但我希望你能理解这个问题。

一些代码：

1）点击菜单项后：

function run(){  //After a click on menu item

  $('.menu').fadeOut(400);
  $('.title').text($(this).text());

  chapterNum = parseInt($(this).attr('id'));
  console.log('downloading data');
  downloadData(chapterNum, main);  //AJAX callback function
}

然后：

function downloadData(chapter, callback){
  $.ajax(
    {
      type: 'GET',
      data: {chapter: chapter},
      url: 'chapters.php',
      dataType: 'json',
      success: function(result){
        console.log("ajax");
        console.log(result);
        callback(result);
      },
      error: function(){
        console.log('connection err');
      }
    }
  );
}

结果如下：

answ : ["brat cioteczny/stryjeczny", "brat przyrodni"]
id : ["16", "19"]
quests : ["first cousin", "half-brother"]

主要功能：

function main(responceData){
  it = 0;
  console.log("main");
  console.log(responceData);
  (...)

  $('.front > h2').text((it+1)+".");
  $('.front > p').text(responceData.quests[it]);
  $('.back > p').text(responceData.answ[it]);

  $('.next').click(function(e){
    e.stopImmediatePropagation();
    console.log(it);
    if(it < Object.keys(responceData.id).length-1){ ++it; }
    else{
      $('.menu').fadeIn(400);
      it = 0;
      console.log("end");
      return;
    }
    console.log(responceData.quests[it]);
    $('.front > h2').text((it+1)+".");
    $('.front > p').text(responceData.quests[it]);
    $('.back > p').text(responceData.answ[it]);
  });

  $('.prev').click(function(e){
    e.stopImmediatePropagation();
    if(it >= 1){ --it; }

    $('.front > h2').text((it+1)+".");
    $('.front > p').text(responceData.quests[it]);
    $('.back > p').text(responceData.answ[it]);
  });

  (...)

}

第二个结果很好，但是当我点击菜单项时，responceData.quests [it]，.. has [[it]仍然是相同的。

只有responceData.quests [0]和answers [0]都很好并且符合我在控制台中显示的结果。

可能代码顺序存在问题，maby我不应该这样做吗？

maby你会更容易看到真正的问题所以这里是链接： click me! :)

提前谢谢你：）

PS我一直在寻找解决方案，所以我希望这个问题不会重复。

Answer 1

每次拨打main()时，都会在next和prev按钮上添加点击处理程序，但您永远不会删除旧的点击处理程序。因此，当您单击这些按钮时，它将继续处理先前调用的结果。在添加新处理程序之前删除旧处理程序：

  $('.next').off("click").click(function(e){
    e.stopImmediatePropagation();
    console.log(it);
    if(it < Object.keys(responceData.id).length-1){ ++it; }
    else{
      $('.menu').fadeIn(400);
      it = 0;
      console.log("end");
      return;
    }
    console.log(responceData.quests[it]);
    $('.front > h2').text((it+1)+".");
    $('.front > p').text(responceData.quests[it]);
    $('.back > p').text(responceData.answ[it]);
  });

和.prev类似。

Answer 2

我不知道通过AJAX来自服务器的是什么。我只看到你只使用数组中的第一个元素：

＆＃13;

it = 0;
  console.log("main");
  console.log(responceData);
  (...)

  $('.front > h2').text((it+1)+".");
  $('.front > p').text(responceData.quests[it]);
  $('.back > p').text(responceData.answ[it]);

＆＃13;

虽然你需要使用f.e.遍历所有项目。 for循环。

AJAX收到的新数据不会覆盖以前的值

2 个答案: