layui点击下一步时根据选择判断下一页展示的内容

layui点击下一步时根据选择判断下一页展示的内容

1.下面我们先看效果当我选择图片时下一步展示的勾选项。


2.下面我们先看效果当我选择音频时下一步展示的勾选项。

主要实现在点击下一步的时候进行判断

//html中的代码这里我把所有第二页需要展示的都写在一个div里了分别用audioa和audio为名字typea为整个div的名字
<div class="knowledgeAdd-item typea" data-num="1">
		<div class="knowledgeAdd-radioDiv audioa">
		<input type="radio" name="wdtype" value="标准规范" title="标准规范" checked class="knowledgeAdd-wdtype">
        </div>
		<div class="knowledgeAdd-radioDiv audioa">
		<input type="radio" name="wdtype" value="文献资料" title="文献资料" class="knowledgeAdd-wdtype">
		</div>
		<div class="knowledgeAdd-radioDiv audioa">
		<input type="radio" name="wdtype" value="政策文件/通知公告" title="政策文件/通知公告" class="knowledgeAdd-wdtype">
		</div>
		<div class="knowledgeAdd-radioDiv audioa">
		<input type="radio" name="wdtype" value="法律法规" title="法律法规" class="knowledgeAdd-wdtype">
		</div>
		<div class="knowledgeAdd-radioDiv audioa">
		<input type="radio" name="wdtype" value="系统手册" title="系统手册" class="knowledgeAdd-wdtype">
		</div>
		<div class="knowledgeAdd-radioDiv audio">
		<input type="radio" name="wdtype" value="技术规范解读" title="技术规范解读" checked class="knowledgeAdd-wdtype">
		</div>
		<div class="knowledgeAdd-radioDiv audio">
		<input type="radio" name="wdtype" value="线下培训" title="线下培训" class="knowledgeAdd-wdtype">
		</div>
		<div class="knowledgeAdd-radioDiv audio">
		<input type="radio" name="wdtype" value="专题培训" title="专题培训" class="knowledgeAdd-wdtype">
		</div>
		<div class="knowledgeAdd-radioDiv audio">
		<input type="radio" name="wdtype" value="软件系统操作" title="软件系统操作" class="knowledgeAdd-wdtype">
		</div>
		<div class="knowledgeAdd-radioDiv audio">
		<input type="radio" name="wdtype" value="直播答疑" title="直播答疑" class="knowledgeAdd-wdtype">
		</div>
		<div class="knowledgeAdd-radioDiv audio">
		<input type="radio" name="wdtype" value="地方培训" title="地方培训" class="knowledgeAdd-wdtype">
		</div>
</div>

下面是js中的代码这里我就放下一步时的操作

addBindEvent:function(bool,data){
			var me = this;
			//使用hide隐藏掉div中knowledgeAdd-radioDiv下面的hide都是一样的
			$(".typea div.knowledgeAdd-radioDiv").hide();
			//下一步点击事件
			$('.knowledgeAdd-next').off().on("click",function(){
				var num = $('.knowledgeAdd-ul li.active').attr('data-num');
				if(num == 0){
					num++;
					$('.knowledgeAdd-cancel').hide();
					$('.knowledgeAdd-prev').show();
					$(".typea div.knowledgeAdd-radioDiv").hide();
				var filetype = $('.knowledgeAdd-filetype:checked').val();
				console.log(filetype);
				if(filetype == "1"){
				$(".typea div.audio").show();
				}else{
					$(".typea div.audioa").show();
				}
				}else if(num == 1){
					num++;
					$('.knowledgeAdd-next').hide();
					$('.knowledgeAdd-success').show()
				}
				$('.knowledgeAdd-ul li').removeClass('active')
				$('.knowledgeAdd-ul li[data-num='+num+']').addClass('active');
				$('.knowledgeAdd-item').hide();
				$('.knowledgeAdd-item[data-num='+num+']').show();
				
			});
			}

完成！！！