javascript - jQuery 从 <li> 获取对象值并更改 <li> 类属性

Question

我有一个 div :

<div id="ddDistr" class="searchBoxSortDistrict" tabindex="1">
  <ul id="ddd">
  </ul>
</div>

我在里面放了来自 json 的 html :

$("#ddd").html(" "), $.each(dis, function(
  index, value) {
    $("#ddd").append( "<li><a style=\"cursor: pointer;\">"
    + value.fieldName + "("
    + value.count + ")</a></li>");
   }
);

我要改onclick <li>类别为 .active .

$('#ddDistr li > a').click(function() {
  console.log('dd');
  $(this).siblings('li').removeClass('active');
  $(this).addClass('active');
});

但是它不起作用，我的代码哪里有问题？

我也想得到value.fieldName来自事件<li>元素并将其解析为 POST .

我怎样才能得到它？

Answer 1

您已经为 anchor 元素使用了点击事件。 $(this).siblings('li') 不会工作，因为 li 不是 anchor 的 sibling 。你需要使用像 $(this).closest('li').siblings('') 这样的东西。

更新:您还需要事件委托(delegate)来将事件附加到动态生成的元素

将类添加到单击的 anchor 父 li:

$('#ddDistr').on('click', 'li > a',function() {
    console.log('dd');
    $(this).closest('li').siblings().removeClass('active');
    $(this).closest('li').addClass('active');
});

为点击的 anchor 标签添加类:

$('#ddDistr').on('click', 'li > a',function() {
  console.log('dd');
  $(this).closest('li').siblings().find('a').removeClass('active');
  $(this).addClass('active');
});