点击时获取元素的id（php、jquery、ajax、javascript）

Question

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

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

这是我的侧边栏代码：

<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"，我想用每个链接的正确提要来更改它。

提前谢谢你。

Answer 1

您可以通过这种方式获取ID，有关更多详细信息和ajax部分，请查看this fiddle，祝您好运。 http://jsfiddle.net/ea51y1j5/

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

Answer 2

给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 3

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

Answer 4

如果我理解正确，您想为所有链接添加点击事件：

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

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

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 并返回与其对应的适当文本正文。