jqueryの背景色を追加する

Question

代わりに背景色を列に追加したいと思います。動的に生成される項目のリストがあります.views-row-1、views-row-2、views-row-3など内部にcontactTitleとcontactDescがあります。

私はviews-rows-2のContactTitleをクリックすると、2番目のビューのcontactDescを表示し、他のビューのcontactDescを隠したいと思います。そのうまく動作します。

代替セルに色を追加したい「タイトル1」を選択すると紫色になりたい、「desc 1」は灰色になりたい、「タイトル2」は紫色で「タイトル3」、灰色です。

「タイトル1」は紫色の「タイトル2」、灰色の「desc 2」、紫色の「タイトル3」です。クリックしたタイトルに基づいて、紫色と灰色を交互に表示したい。

タイトル1がクリックDESC 1 タイトル1 -purple、DESC 1 -gray、タイトル2 -purple、タイトル3 -gray タイトル2がクリックされた場合のみDESC 2 タイトル1 -purple見える可視である場合、タイトル2 -gray、DESC 2 - 紫色、タイトル3 -gray タイトル3がクリックされた場合のみDESC 3が表示され タイトル1 -purple、タイトル2 -gray、タイトル3 -gray、DESC 3紫色

jQuery(document).ready(function($) { 
 
    $('.views-row-1 .contactDesc').css('display','block'); 
 
\t $('.views-row-1 .contactTitle').addClass('active'); 
 
    $('.contactTitle').click(function(){ 
 
    if(!$(this).hasClass('active')){ 
 
     $('.contactDesc').slideUp(); 
 
     $('.contactTitle').removeClass('active'); 
 
     $(this).next('.contactDesc').slideDown(); 
 
     $(this).addClass('active'); 
 
    } 
 
    }); 
 
});

.contactDesc{ 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="views-row views-row-1 views-row-odd views-row-first"> 
 
    <div class="contactTitle"> 
 
    Title 1 
 
    </div> 
 
    <div class="contactDesc"> 
 
    desc 1 
 
    </div> 
 
</div> 
 
<div class="views-row views-row-2 views-row-even"> 
 
    <div class="contactTitle"> 
 
    Title 2 
 
    </div> 
 
    <div class="contactDesc"> 
 
    Desc 2 
 
    </div> 
 
</div> 
 
<div class="views-row views-row-3 views-row-odd"> 
 
    <div class="contactTitle"> 
 
    Title 3 
 
    </div> 
 
    <div class="contactDesc"> 
 
    Desc 3 
 
    </div> 
 
</div>

Answer 1

クリックすると別の要素にも適用されます。負荷の

jQuery(document).ready(function($) { 
 
    $('.views-row-1 .contactDesc').css('display','block'); 
 
\t $('.views-row-1 .contactTitle').addClass('active'); 
 
    
 
    $('.contactTitle').click(function(){ 
 
    
 
    if(!$(this).hasClass('active')){ 
 
     $('.contactDesc').slideUp(); 
 
     $('.contactTitle').removeClass('active'); 
 
     $('.contactTitle').addClass('grey-bg'); 
 
     $(this).next('.contactDesc').slideDown(function(){ 
 
     $('.colorme').removeClass('grey').removeClass('purple'); 
 
      $('.colorme:visible:odd').addClass('purple'); 
 
      $('.colorme:visible:even').addClass('grey'); 
 
     }); 
 
     $(this).addClass('active'); 
 
    } 
 
    }); 
 
});

.contactDesc{ 
 
    display:none; 
 
} 
 
.purple{ 
 
    background:purple; 
 
} 
 
.grey{ 
 
    background:grey; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="views-row views-row-1 views-row-odd views-row-first"> 
 
    <div class="contactTitle colorme"> 
 
    Title 1 
 
    </div> 
 
    <div class="contactDesc colorme"> 
 
    desc 1 
 
    </div> 
 
</div> 
 
<div class="views-row views-row-2 views-row-even"> 
 
    <div class="contactTitle colorme"> 
 
    Title 2 
 
    </div> 
 
    <div class="contactDesc colorme"> 
 
    Desc 2 
 
    </div> 
 
</div> 
 
<div class="views-row views-row-3 views-row-odd"> 
 
    <div class="contactTitle colorme"> 
 
    Title 3 
 
    </div> 
 
    <div class="contactDesc colorme"> 
 
    Desc 3 
 
    </div> 
 
</div>