Question

我需要一些帮助。我无法使用Jquery动态添加类。我在下面解释我的代码。

$.each(obj.cid, function() {
      $("#ulCategory").append("<li><a href='javascript:void(0)' onclick='savesubcat("+this.id+","+this+")'>" + this.name +</li>");
});

function savesubcat(id,$this){
  $($this).addClass("active");
  $($this).siblings().removeClass('active');
}

在这里，我需要在点击的锚标签上添加活动类，但以我的方式它不会发生这样的事情。请帮助我。

Answer 1

您的第一个问题是您没有在函数调用中将字符串值包装在引号中。第二个问题是，从上下文来看，this是一个对象。将对象连接到字符串是不会按预期工作的。

要解决此问题，使用不显眼的委托事件处理程序会好得多。这样你就可以在处理函数中得到this引用，所以你不需要传递它。您需要做的就是将对象中的id放在data属性中，以便可以在事件处理程序中读取它。

另请注意，this将引用没有兄弟姐妹的a元素。要将类添加到其他a元素，您需要将DOM遍历到父ul，然后find()。试试这个：

试试这个：

＆＃13;

var obj = {
  cid: [{
    id: 'abc',
    name: 'foo'
  }, {
    id: 'xyz',
    name: 'bar'
  }]
};

var li = $.map(obj.cid, function(o) {
  return '<li><a href="#" data-id="' + o.id + '">' + o.name + '</a></li>';
});

$('#ulCategory').append(li.join('')).on('click', 'a', function(e) {
  e.preventDefault();
  var $a = $(this);
  console.log($a.data('id'));
  
  $a.addClass('active').closest('ul').find('a').not($a).removeClass('active');
})

＆＃13;

.active { color: red; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="ulCategory"></ul>

＆＃13;

无法使用Jquery

1 个答案: