如何使用ajax动态添加类

How to add class dynamically using ajax.?

本文关键字：添加 动态 ajax 何使用      更新时间：2023-09-26

当我点击任何名称时，我必须为所选名称的锚标记以及该用户的部门名称添加class"active"。

<ul id="orglistingid">
    <li> 
        <a>Sales </a> <!--Deparemtn Name -->
        <ul id="dId">
           <li> 
              <a>Rahul </a> <!--User -->
          </li>
           <li> 
              <a>Nitin </a>
          </li>
        </ul>
    </li>
</ul>
<ul id="orglistingid">
    <li> 
        <a class="active">Development</a>
        <ul>
           <li id="dId"> 
              <a class="active">Rokesh </a>
          </li>
           <li> 
              <a>Preeti</a>
          </li>
        </ul>
    </li>
</ul>

我正在使用以下代码，有人能告诉我需要做什么更正吗。。？

if (orgID != null && orgID == 'dId') {
    $("#dId li a").removeClass("orglistactive");
    $(this).attr("class","orglistactive");
    var parentID = $(e.target).parent().parent().parent().attr("id");
    alert($(e.target).parent().parent().parent().attr("id"));
    $("#"+parentID+" a").attr("class","orglistactive");
}

看起来您正在努力实现如下所示的目标：

<script type="text/javascript">
var orgID = $('#dId');
if(orgID.attr('id') == 'dId'){
     orgID.find('>li>a').addClass("orglistactive"); 
     var parentID = orgID.attr("id");
     alert(orgID.attr("id"));
} 
</script>

但从html和jquery的角度来看，发现了一些不正确的地方。

  1. Id是唯一的，但您已使用"dId"不止一次
  2. e.target仅在有事件附加到元素时有效，或者可以使用"window.event||e"捕获。在你的代码中，我看不出e.target的用途

希望这能有所帮助！：）

这可以通过一点jQuery快速实现。

第一种方法

$('ul a').click(function(){
    $(this).addClass('orglistactive');
    $(this).parent().parent().parent().find('a:first').addClass('orglistactive');
});

看看现场演示：http://jsfiddle.net/augusto1982/6xM2P/

第二种方法

需要记住的一点是，如果页面中没有其他列表，则此代码可以正常工作。如果不是这样，您应该使用一些CSS类来确定绑定click函数的对象。否则，jQuery选择器会变得有点混乱。

$('#orglistingid li ul li a').click(function(){
    $(this).addClass('orglistactive');
    $(this).parent().parent().parent().find('a:first').addClass('orglistactive');
});

示例：http://jsfiddle.net/augusto1982/GXcvD/

第三种方法

我还建议您为每个用户锚点添加一个类，以使其更容易。

HTML

<ul id="orglistingid">
    <li> 
        <a>Sales </a> <!--Deparemtn Name -->
        <ul id="dId">
           <li> 
              <a class='user'>Rahul </a> <!--User -->
          </li>
           <li> 
              <a class='user'>Nitin </a>
          </li>
        </ul>
    </li>
</ul>
<ul id="orglistingid">
    <li> 
        <a class="active">Development</a>
        <ul>
           <li id="dId"> 
              <a class="active user">Rokesh </a>
          </li>
           <li> 
              <a class='user'>Preeti</a>
          </li>
        </ul>
    </li>
</ul>

jQuery

$('.user').click(function(){
    $(this).addClass('orglistactive');
    $(this).parent().parent().parent().find('a:first').addClass('orglistactive');
});

看看第二个例子：http://jsfiddle.net/augusto1982/GW4mt/

最终方法

为了避免所有的parent()...parent()调用，可以使用closest方法，但需要稍微更改HTML。

HTML

<ul id="orglistingid">
    <li class='department'> 
        <a>Sales </a> <!--Deparemtn Name -->
        <ul id="dId">
           <li> 
              <a class='user'>Rahul </a> <!--User -->
          </li>
           <li> 
              <a class='user'>Nitin </a>
          </li>
        </ul>
    </li>
</ul>
<ul id="orglistingid">
    <li class='department'> 
        <a class="active">Development</a>
        <ul>
           <li id="dId"> 
              <a class="active user">Rokesh </a>
          </li>
           <li> 
              <a class='user'>Preeti</a>
          </li>
        </ul>
    </li>
</ul>

jQuery

  $('.user').click(function(){
    $(this).addClass('orglistactive');
    $(this).closest('.department').find('a:first').addClass('orglistactive');
    });

演示：http://jsfiddle.net/augusto1982/e7PVF/

和其他评论一样，我建议您拥有唯一的ID。虽然这不是一种限制，但却是一种最佳实践。

相关文章：