Question

对不起，这是我的第一个项目，我学到了很多东西。所以，如果有人能帮助我，我将不胜感激。

我的项目中有这个侧边栏，其中包含rss链接。我必须使用ajax，所以每当用户点击任何rss链接时，Feed都会显示在屏幕上。

这是我的侧边栏代码：

<div class="col-md-3">
<div class="well" style="width:300px; bottom: 0; top: 50px; position: fixed;">
    <div id="sidebar-wrapper" style="overflow-y: scroll; overflow-x: scroll; height: 100%;">
        <ul class="list-unstyled">
            <li class="nav-header"> 
                <a href="#" data-toggle="collapse" data-target="#userMenu">
                    <h5><b>Subscriptions </b><i class="glyphicon glyphicon-chevron-down"></i></h5>
                </a>

                <ul class="list-unstyled collapse in" id="userMenu">
                    <li><a id="id_1" href="#">Sub_1</a></li>
                    <li><a id="id_2" href="#">Sub_2</a></li>
                    <li><a id="id_3" href="#">Sub_3</a></li>
                    <li><a id="id_4" href="#">Sub_4</a></li>
                    <li><a id="id_5" href="#">Sub_5</a></li>
                    <li><a id="id_6" href="#">Sub_6</a></li>
                    <li><a id="id_7" href="#">Sub_7</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>

点击任何链接时，是否有机会获取每个链接的ID？

或者我必须编写一个不同的函数，在哪里为每个id使用ajax？

有人可以告诉我如何在这个上使用ajax一次，而不是七次吗？我的正文标记中有一个div：div id="changebodywithaxaj"我希望使用每个链接的正确Feed来更改它。

提前谢谢。

Answer 1

将点击事件监听器附加到li a元素;在单击处理程序中，您可以从此this.id的id属性中获取元素单击的ID。然后，您可以将该id用作ajax调用中的数据。另外，传递事件对象e，并调用e.preventDefault()以阻止点击尝试关注链接 - 在您的情况下，它会跳到顶部。

$('li a').on('click', function(e) {
    e.preventDefault();
    var Id = this.id;
    // use id in ajax call
});

Answer 2

您可以通过这种方式获取ID，有关详细信息和ajax部分，请检查这个小提琴，祝你好运。 http://jsfiddle.net/ea51y1j5/

$("#userMenu").children('li').click( function() {
    var rssId = $(this).children('a').attr('id');
});

Answer 3

只需使用$('clickedEl').attr('id')检索点击值即可链接到jsfiddle - ＆gt; http://jsfiddle.net/6ov1ydzv/

Answer 4

如果我感到不正确，您想要向所有链接添加点击事件：

$('#userMenu a').on("click", ajaxCall);

并在click事件中获取被点击元素的id并调用ajax函数在屏幕上绘制feed：

function ajaxCall(){
    var id = $(this).attr('id');
    $.ajax({
        url: "url",
        data: { id : id },
        success: paintFeedsOnScreen
    })
}

那是或者我错过了什么？

Answer 5

这个怎么样？

$('ul.list-unstyled').on('click', 'a', function() {
  var ID = this.id;
  //use the ID for your ajax call...
});

更好的是，你也可以使用元素id，因为你有一个，如下所示：

$('#userMenu').on('click', 'a', function() {

Answer 6

你可以试试这个

  $('li a').click(function(){
    var id = this.id;
       $.ajax({
            url: // your url goes here
             data:{id:id},
             success: function(result){

          }
        });
    });

Answer 7

因此，如果您只想点击链接中的ID，请执行以下操作：

$("#userMenu li a").on("click", function(){
    var id = this.id;
    // This is where you can do what ever with your id from that element.
    return false; // This is so that it won't follow the link you're clicking and reload the page 
                  // when you don't want to.
});

但也许您真的想要点击链接中的href。既然它是你想要遵循的链接（使用ajax）吗？你几乎也做同样的事情：

$("#userMenu li a").on("click", function(){
    var href = $(this).attr('href');
    // do your ajax stuff here perhaps. With href as a link in your ajax call. 
    return false; 
});

Answer 8

在页面上将此代码添加为JS脚本：

$("#userMenu a").click(function() {
    $("#changebodywithajax").html(updateRSSWithID($(this).attr('id')));
});

其中updateRSSWithID(IDGoesHere)是一个函数，它接收元素的ID并返回与其对应的相应文本主体。

单击时获取元素的id（php，jquery，ajax，javascript）

8 个答案: