jQuery addClass вопрос - PullRequest
Новая
       11

jQuery addClass вопрос

1 голос
/ 09 июля 2009

Я хочу добавить класс к нескольким элементам 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');
        });

Ответы [ 5 ]

3 голосов
/ 09 июля 2009

Я бы несколько упростил это: 

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

Нет смысла делать манипуляции со строками, когда это не нужно. Постарайтесь сделать свой код максимально простым, особенно если относительно небольшое изменение разметки делает его намного более читабельным.

1 голос
/ 09 июля 2009

Код у вас отлично работает для меня. Я вставил полную страницу, которую использовал для проверки. 

<!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') в начале, чтобы "активный" класс переключался на выбранный диапазон, а не применялся кумулятивно.

0 голосов
/ 09 июля 2009

Вам не нужно это делать, но попробуйте это, чтобы увидеть, работает ли оно: 

$("span.branche" + sId).each(function() {
    $(this).addClass("active");
});
0 голосов
/ 09 июля 2009

Я думаю, что только проблема в 

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

только и работает нормально.

0 голосов
/ 09 июля 2009

Попробуйте $(".branche"+sId).addClass('active');

...