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')、最初に a を追加して、「アクティブな」クラスが累積的に適用されるのではなく、選択されたスパンに切り替えられるようにすることをお勧めします。

于 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>

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 に答える