Question

我使用下拉列表完成了一个小教程示例，该列表使用Ajax加载了一些PHP页面。

我的问题是，我可以使用文字链接而不是下拉列表吗？如果是这样，代码如何变化？

$(document).ready(function() {
  $('#category').change(function() {

    var val = $(this).val();
    $('#firstresult').empty().addClass('loading').load(val + '.php', function(){
      $('#firstresult').removeClass('loading') 
    });

  });
});

Answer 1

如果#category是文字链接的ID。

我输入了false，以防止点击事件冒泡并重新加载您的页面。

我还没有测试过......

$(document).ready(function() {
      $('#category').click(function() {

        var val = $(this).attr('href');
        $('#firstresult').empty().addClass('loading').load(val + '.php', function(){
          $('#firstresult').removeClass('loading') 
        });

        return false;

      });
    });

修改

<a id="category" href="my_val" title="">my link</a>

您可以传递href属性
中的值

Answer 2

$(document).ready(function() {
  $('#yourLink').click(function(e) {
     e.preventDefault();//so the link doesn't try to go somewhere
     var val = $(this).text();  //get value from the TEXT of your link

     $('#firstresult').empty().text('loading').addClass('loading');  //put 'loading' in your firstresult div and change the class to loading
     $('#firstresult').load(val + '.php', function(){  
      //load firstresult with what your php page returns
      $('#firstresult').removeClass('loading') 
    });

  });
});

Answer 3

使用点击功能

执行相同操作

$(document).ready(function() {
     $('#my_link').click(function(e) {
         e.preventDefault();
         var val=$(this).text();
         $('#firstresult').empty().addClass('loading').load(val + '.php', function(){
         $('#firstresult').removeClass('loading') 
         });

    });
});

Answer 4

您需要为文本链接指定一个id，但可能会关闭href。

＆lt; a id ='myTextLink'＆gt; Link＆lt; / a＆gt;

$(document).ready(function() {
  $('#myTextLink').click(function() {

    var val = $(this).val();
    $('#firstresult').empty().addClass('loading').load(val + '.php', function(){
      $('#firstresult').removeClass('loading') 
    });

  });
});

可以通过文本链接触发Ajax调用吗？

4 个答案: