0

我有一个<div class="container">将显示来自位于内容文件夹中的单独 php 文件的内容，这些文件链接<a>到<ul>. class="process"单击列表中的链接后，容器中将显示加载图形（处理中...） ，并显示调用的 php 文件。

HTML（淡化）：

<div class="container"></div>

<ul id="yourIdeas">
  <li><a href="one">one</a></li> <!--content/one.php-->
  <li><a href="two">two</a></li>
  <li><a href="three">three</a></li>
  <li><a href="four">four</a></li>
</ul>

容器/加载图形、样式等...都很好。

查询：

(function() {
  var typ = {
  loading: $('<div />', { class: 'process' }),
  area: $('.container')
  }

  var file = $('ul#yourIdeas li a').attr('href');
  var thePage = $('content/' + file + '.php');

  $('ul#yourIdeas li a').on('click', function() {
    $.ajax({
        url: 'thePage',
        beforeSend: function() {
            typ.area.append(typ.loading);
        },
        success: function(data) {
            typ.area.html(data);
        }
    });
  });
});

我无法让 Jquery/Ajax 执行此任务；单击a 时ul#yourIdeas li a，它会抓取 href 并将其关联到指定的 php 文件，然后将 'processing...' 加载到容器中，然后在容器中显示所选 php 文件的内容。

如果我专门单独要求每个链接，我可以让它工作；

代码：

var typ = {
  loading: $('<div />', { class: 'process' }),
  area: $('.container')
}

$('ul#yourIdeas li a#two').on('click', function() {
  $.ajax({
    url: 'content/two.php',
    beforeSend: function() {
        typ.area.append(typ.loading);
    },
    success: function(data) {
        typ.area.html(data);
    }
  });
});

但如果可能的话，我希望拥有一个包含所有链接和文件的脚本。

提前感谢您的帮助。

4

1 回答 1

3

您必须在函数内移动file和thePage变量：click

(function() {
  var typ = {
    loading: $('<div />', { class: 'process' }),
    area: $('.container')
  };

  $('ul#yourIdeas li a').on('click', function(e) {
    e.preventDefault();
    var file = $(this).attr('href');
    var thePage = 'content/' + file + '.php';

    $.ajax({
        url: thePage,
        beforeSend: function() {
            typ.area.append(typ.loading);
        },
        success: function(data) {
            typ.area.html(data);
        }
    });
  });
});
于 2013-05-04T05:42:09.143 回答