Jqueryを使用してタグにクラスを動的に追加できません

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'); 
} 

私は、クリックされたアンカータグでアクティブなクラスを追加する必要がありますが、私のように、その私を助けてthis.Pleaseのように起きていません。

Answer 1

最初の問題は、関数呼び出しで文字列値を引用符で囲んでいないことです。第2の問題は、コンテキストから、thisがオブジェクトであることです。オブジェクトを文字列に連結することは、期待通りには機能しません。

これを修正するには、控えめな委任イベントハンドラを使用するほうがずっと良いでしょう。そうすれば、ハンドラ関数内でthisの参照が得られるので、渡す必要はありません。あなたがする必要があるのは、オブジェクトのidをdata属性に入れて、イベントハンドラ内で読むことができるようにするだけです。

また、thisは、兄弟を持たないa要素を参照します。クラスを他のa要素に追加するには、DOMを親ulにトラバースしてからfind()に移動する必要があります。これを試してみてください：

この試してみてください：あなたはそれがJSコードと一緒にHTMLと表示するように最善のHTMLを操作するコードを持っている場合

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'); 
 
})

.active { color: red; }

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