1

我想根据正在单击的链接的类名将一个类添加到具有公共类名的多个跨度元素中。这仅适用于第一个元素 (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');
        });
4

5 回答 5

3

我会稍微简化一下：

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

当你不需要的时候进行字符串操作是没有意义的。尽量让你的代码尽可能简单，尤其是当一个相对较小的标记更改使它更具可读性时。

于 2009-07-09T13:39:35.280 回答
1

你的代码对我来说很好。我粘贴了一个完整的页面，用于测试。

<!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')在开头添加一个，以便将“活动”类切换到选定的跨度，而不是累积应用。

于 2009-07-09T13:49:07.903 回答
0

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

$("span.branche" + sId).each(function() {
    $(this).addClass("active");
});
于 2009-07-09T13:51:26.623 回答
-1

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

于 2009-07-09T13:38:25.173 回答
-1

我认为唯一的问题在于

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

section ，其中class="branche1"重复 3 次

我只修改了这部分：

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

只有和它的工作正常。

于 2009-07-09T13:46:30.077 回答