Question

我想根据被点击的链接的类名，为具有公共类名的多个span元素添加一个类。这对我来说仅适用于第一个元素（1）。其余的没有结果（也没有错误）。这是我试图获得功能的代码，首先是HTML然后是jQuery部分：

<ul id="brancheNav">
    <li><a href="#" class="brancheTab" id="brancheTab1">Duurzaam</a></li>
    <li><a href="#" class="brancheTab" id="brancheTab2">B-to-B</a></li>
    <li><a href="#" class="brancheTab" id="brancheTab3">Healthcare</a></li>
    <li><a href="#" class="brancheTab" id="brancheTab4">Dienstverlening</a></li>
</ul>
<div class="opdrachtgevers">
<p>
    <span class="branche1">ADFSDFSDF</span>&nbsp;
    <span class="branche1">IUYIUYIU</span>&nbsp;
    <span class="branche1">CVCBVCV</span>&nbsp;
    <span class="branche4">MNBBMNBMB</span>&nbsp;
</p>
</div>

        $("a.brancheTab").click(function(){         
            sClickedId = $(this).attr('id');                
            sId = sClickedId.substr((sClickedId.length - 1),1);
            //alert('addClass: ' + sId);
            $('span.branche'+sId).addClass('active');
        });

Answer 1

我会稍微简化一下：

<ul id="brancheNav">
  <li><a href="#" id="tab1">Duurzaam</a></li>
  <li><a href="#" id="tab2">B-to-B</a></li>
  <li><a href="#" id="tab3">Healthcare</a></li>
  <li><a href="#" id="tab4">Dienstverlening</a></li>
</ul>
<div class="opdrachtgevers">
<p>
  <span class="btab1">ADFSDFSDF</span> 
  <span class="btab1">IUYIUYIU</span> 
  <span class="btab1">CVCBVCV</span> 
  <span class="btab4">MNBBMNBMB</span> 
</p>
</div>

大大简化了您的Javascript：

$("#branchNav > a").click(function() {
  $("span.b" + this.id).addClass('active");
});

当你不需要时，没有必要进行字符串操作。尽量保持代码尽可能简单，特别是如果相对较小的标记更改使其更具可读性。

Answer 2

你的代码对我来说很好。我已经粘贴了一个完整的页面，我曾经测试过它。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>untitled</title>
    <meta name="author" content="Patrick McElhaney">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>    
  <script type="text/javascript" charset="utf-8">
    $().ready(function () {
      $("a.brancheTab").click(function(){                     
                              sClickedId = $(this).attr('id');                                
                              sId = sClickedId.substr((sClickedId.length - 1),1);
                              //alert('addClass: ' + sId);
                              $('span.branche'+sId).addClass('active');
                      }); 
    }); 
  </script>            

  <style type="text/css" media="screen">
    .active {font-weight: bold;}
  </style>
</head>
<body>           

  <ul id="brancheNav">
      <li><a href="#" class="brancheTab" id="brancheTab1">Duurzaam</a></li>
      <li><a href="#" class="brancheTab" id="brancheTab2">B-to-B</a></li>
      <li><a href="#" class="brancheTab" id="brancheTab3">Healthcare</a></li>
      <li><a href="#" class="brancheTab" id="brancheTab4">Dienstverlening</a></li>
  </ul>
  <div class="opdrachtgevers">

 <!-- What you have -->
 <p>
      <span class="branche1">ADFSDFSDF</span> 
      <span class="branche1">IUYIUYIU</span> 
      <span class="branche1">CVCBVCV</span> 
      <span class="branche4">MNBBMNBMB</span> 
  </p>

  <!-- What I think you might mean -->
  <p>
      <span class="branche1">ADFSDFSDF</span> 
      <span class="branche2">IUYIUYIU</span> 
      <span class="branche3">CVCBVCV</span> 
      <span class="branche4">MNBBMNBMB</span> 
  </p>

  </div>

</body>
</html>

我不确定您要尝试做什么，但您可能希望在开头添加$('span.branche').removeClass('active')，以便将“活动”类切换到所选范围，而不是累积应用。

Answer 3

你不应该这样做，但试试看它是否有效：

$("span.branche" + sId).each(function() {
    $(this).addClass("active");
});

Answer 4

尝试$(".branche"+sId).addClass('active');

Answer 5

我认为只有问题在

 <p>
 <span class="branche1">ADFSDFSDF</span> 
<span class="branche1">IUYIUYIU</span> 
<span class="branche1">CVCBVCV</span> 
<span class="branche4">MNBBMNBMB</span>

部分，其中 class =“branche1”重复了3次

我只修改过这部分：

<p>
<span class="branche1">ADFSDFSDF</span> 
<span class="branche2">IUYIUYIU</span> 
<span class="branche3">CVCBVCV</span> 
<span class="branche4">MNBBMNBMB</span>

只是它的工作正常。

jQuery addClass问题

5 个答案: