在jquery中为单元格填充备用颜色

Question

我想为具有标题和desc的单元格添加背景颜色为多个视图div.By默认我想将紫色添加到标题1，将灰色添加到desc 1，将紫色添加到标题2，将灰色添加到＆＃39;标题3＆＃39 ;.现在点击任何一个标题后它运作良好。  我想在装载时填充背景颜色

＆＃13;

＆＃13;

jQuery(document).ready(function($) {
  $('.views-row-1 .contactDesc').css('display','block');
	$('.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');
    } 
  });
});

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

我没有看到需要使用javascript填充颜色。你可以用CSS制作它。这是你的snipet的副本，我删除了jQuery着色on.click ..并将.contactTitle和.contactDesc类添加到你的着色css sheme。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您只需触发点击事件即可。

jQuery(document).ready(function($) {
  $('.views-row-1 .contactDesc').css('display','block');
	$('.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');
    } 
  });
  
  $('#test').trigger('click');
});

.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 id='test' class="contactTitle colorme">
     Title 3
  </div> 
  <div class="contactDesc colorme">
     Desc 3
  </div> 
</div>