如何使用Jquery动态查找html链接的属性并用逗号标记ref属性？

发布于 2024-12-12 07:47:50 字数 439 浏览 0 评论 0原文

想象一下，我有一个动态填充的水果名称列表，由 php 生成的代码如下

<div id="fruit_list">
  <ol>
    <li>Apple <a id='1' ref='red'>Delete</a></li>
    <li>Pear <a href id='2' ref='green'>Delete</a></li>
  </ol>
</div>

我想做一个 ajax 删除，当用户单击“fruit_list div”下的“删除”链接时，在单击“删除”链接时，我想要知道单击的链接的属性 id 和 ref。知道属性后，我如何在 jQuery 中分解它，以便可以用逗号分隔 ref。

如果我错了，你能建议一个方法吗？

原文

Imagine i have a list of fruit names being dynamically populated and the codes generated by php is as follows

<div id="fruit_list">
  <ol>
    <li>Apple <a id='1' ref='red'>Delete</a></li>
    <li>Pear <a href id='2' ref='green'>Delete</a></li>
  </ol>
</div>

I want to do a ajax delete where when the user clicks delete link, under the fruit_list div and while onclick of the delete link, i want to know the attributes id and ref of the clicked link. Upon knowing attributes, how could i explode it in jQuery so that the ref can be seperated by the comma.

Can you suggest an approch if i am wrong?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

衣神在巴黎 2024-12-19 07:47:50

尝试：

$('#fruit_list a').bind('click', function (evt) {
  console.log(
    /*the element id*/
    $(this).attr('id'),

    /*the element attribute ref, splitted by ,*/
    $(this).attr('ref').split(/,/)
  );
});

Try:

$('#fruit_list a').bind('click', function (evt) {
  console.log(
    /*the element id*/
    $(this).attr('id'),

    /*the element attribute ref, splitted by ,*/
    $(this).attr('ref').split(/,/)
  );
});

回复收藏 0 原文

素染倾城色 2024-12-19 07:47:50

没听说过 ref 属性。而且你不应该自己编造。您可以使用它的数据属性（data-ref=value）。

或者你可以这样做 http://jsfiddle.net/gmrcn/6/

HTML

<div id="fruit_list">
  <ol>
    <li>Apple <a href="#1" class="delete" id='red'>Delete</a></li>
    <li>Pear <a href="#2" class="delete" id='green'>Delete</a></li>
  </ol>
</div>

$('a.delete').click( function() {
    //get fruitname and id
    var fruit = $(this).attr('id');
    var id = $(this).attr('href').replace("#","");

    //send with ajax, to your serverscript
    $.post('yourdeletescript.php', {id:id, fruit:fruit} , function(data) {
         //remove LI of the deleted 
         $('#'+fruit).parent().remove();
    });

    //disable default link action
    return false;
});

Haven't heard of an ref attribute. And you shouldn't make up your own. You could use the data attribute for it (data-ref=value).

Or you could do it like this http://jsfiddle.net/gmrcn/6/

HTML

<div id="fruit_list">
  <ol>
    <li>Apple <a href="#1" class="delete" id='red'>Delete</a></li>
    <li>Pear <a href="#2" class="delete" id='green'>Delete</a></li>
  </ol>
</div>

$('a.delete').click( function() {
    //get fruitname and id
    var fruit = $(this).attr('id');
    var id = $(this).attr('href').replace("#","");

    //send with ajax, to your serverscript
    $.post('yourdeletescript.php', {id:id, fruit:fruit} , function(data) {
         //remove LI of the deleted 
         $('#'+fruit).parent().remove();
    });

    //disable default link action
    return false;
});

回复收藏 0 原文

一腔孤↑勇 2024-12-19 07:47:50

我不太明白你到底在问什么。但我会按如下方式实现删除功能。

$('div#fruit_list ol li a').click(function(){ //adding click event to all delete links
  var id = $(this).attr('id'); //getting value of id attribute of the clicked link
  var ref= $(this).attr('ref');//getting value of ref attribute of the clicked link
  $.post('/script',{id:id, ref:ref},function(){ // send id and ref to delete script
    $('#'+id).parent().remove();//remove the corresponding li on success
  });
})

I don't quite understand what exactly you are asking. But i would implement delete function as follows.

$('div#fruit_list ol li a').click(function(){ //adding click event to all delete links
  var id = $(this).attr('id'); //getting value of id attribute of the clicked link
  var ref= $(this).attr('ref');//getting value of ref attribute of the clicked link
  $.post('/script',{id:id, ref:ref},function(){ // send id and ref to delete script
    $('#'+id).parent().remove();//remove the corresponding li on success
  });
})

回复收藏 0 原文

~没有更多了~