jquery - 单击链接更改父 li ID

Question

<div id="content-container">
<ul>
<li id="link1"><a  href="http://mysite/ClassifiedPrograms/Pages/Training1.aspx">Training1</a></li>
<li id="link2" ><a  href="http://mysite/ClassifiedPrograms/Pages/Training2.aspx">Training2</a></li>

<li id="link3"  ><a href="http://mysite/ClassifiedPrograms/Pages/Training3.aspx">Training3</a></li>
<li id="link4" ><a href="http://mysite/ClassifiedPrograms/Pages/Training4.aspx">Training4</a></li>

</ul>
</div>

单击任何链接时，该链接的 onclick 应更改父 li id，如果单击 link1，则使其成为 clickedlink1。我如何在 jquery 中做到这一点？

Answer 1

您不应该更改 ID，因为它们就是这样（在我看来）。

在这种情况下，我会使用 jQuery和跟踪类单击的内容addClass()，因此一旦单击，您就可以将类添加到父元素。removeClass()toggleClass()clickedli

http://api.jquery.com/addClass/

http://api.jquery.com/removeClass/

http://api.jquery.com/toggleClass/

所以：

$(document).ready(function() {
    $("a").click(function(event){
         $(this).parent().toggleClass("clicked");
    });
});

作为跟踪单击状态的粗略示例，您可以使用$(".clicked")选择器来获取这些元素。

Answer 2

使用 jQuery：

$('#content-container a).click(function(e) {
   e.preventDefault();
   $(this).parent().attr('id', 'clicked' + (this).attr('id'));
});

但你不应该真的改变id，你可以设置一个类

$('#content-container a).click(function(e) {
 e.preventDefault();
 $(this).parent().addClass('clicked');
});

Answer 3

更改li单击链接时的类在这里不一定有帮助，因为它会在新页面加载后立即重置。

你可以改用这个：

$("a:visited").parent("li").addClass("is_visited");

这会将类“is_visited”添加到li已访问链接的任何位置。

Answer 4

​$(document).ready(function(){
    $("#content-container a").click(function(){
          var id = $(this).parent().attr("id");
          $(this).parent().attr("id","clicked" + id);

    });        
});​

Answer 5

您应该以某种方式将该数字添加到链接中，也许是一个data-nr属性。

然后：

1. 为链接分配事件侦听器

   $('a').click(function(){ });

2. 提取号码

   var nr = $(this).attr('data-nr');

3. 设置父id

   $(this).parent().attr('id', 'clickedlink'+nr);

Answer 6

将其放在您网站的头部或任何 Javascript 文件中：

$(document).ready(function () {    
$('a').click(function () {
$(this).parent().attr('id', 'clicked' + $(this).parent().attr('id'));
});
});