php结合jq通过index值进行展示或者隐藏

在这里插入图片描述

具体功能展示如图

<?php   $txt='';
                    if($house['activity_tags']!=[]){
    
     
                        foreach($house['activity_tags'] as $key => $item){
    
     
                            $txt .='<div class="activity_cen activity_up"><span class="activity_left">'.$item['activity_type'].'</span><span class="activity_nav">'.$item['activity_tag'].'</span><span class="activity_unfold activity_unfold_'.$key.'"  οnclick="unfold('.$key.')"> > </span> <span class="hide activity_shut activity_shut_'.$key.'" οnclick="activity_shut('.$key.')"> v </span></div>';
                            $txt .='<div class="hide activity_tags_'.$key.'" >';
                            $txt .='<div class="activity_cen">';
                            $txt .='<span class="activity_obj">[活动对象]</span>';
                            $txt .='<span class="activity_nav">'.$item['activity_object'].'</span>';
                            $txt .='</div>';
                            $txt .='<div class="activity_cen">';
                            $txt .='<span class="activity_obj">[签约类型]</span>';
                            $txt .='<span class="activity_nav">'.$item['contract_type'].'</span>';
                            $txt .='</div>';
                            $txt .='<div class="activity_cen"><span class="activity_obj">[活动说明]</span></div>';
                            $txt .='<div class="activity_cen"><span class="activity_obj">'.$item['activity_rules'].'</span></div>';
                            $txt .='</div>';
                        }
                    echo $txt; }?>
// 活动标签详情
  $('#activity_show').on('click', function () {
    
    
    $('#activity_box').show()
  })
  $('#close').on('click', function () {
    
    
    $('#activity_box').hide()
  })
  // 活动规则说明
  this.unfold = function (i) {
    
    
    $('.activity_tags_' + i).removeClass('hide')
    $('.activity_shut_' + i).removeClass('hide')
    $('.activity_unfold_' + i).addClass('hide')
  }
  this.activity_shut = function (i) {
    
    
    $('.activity_unfold_' + i).removeClass('hide')
    $('.activity_tags_' + i).addClass('hide')
    $('.activity_shut_' + i).addClass('hide')
  }

通过第一步便利数组,首先需要在点击当前的时候把index值传递过去
jq通过方法接收,通过定义的hide class,控制当前索引的展示或者隐藏,移出hide,或者添加hide

猜你喜欢

转载自blog.csdn.net/Sunshine_GirlXue/article/details/107781104