click事件，同一位置切换两个图标

最新推荐文章于 2023-09-01 20:14:06 发布

原创最新推荐文章于 2023-09-01 20:14:06 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

myWork-- 专栏收录该内容

59 篇文章

订阅专栏

本文介绍使用jQuery实现元素的显示与隐藏效果，包括点击按钮切换显示状态、复选框图片状态改变以及多选后页面布局切换等功能。通过具体代码实例展示了不同场景下的交互效果实现。

1，可能最简单的就是toggle,但是这个属性只有是jquery.1.8.1.js才可以用，右局限性。

2，用click实现：点一下显示下拉内容，再点一下消失，点击其他地方也消失

	//    远程操作
    $('.vdts-left-bottom .select').click(function(e) {
        var statebox = $('.optionbox').css('display');
        if (statebox == 'none') {
            $('.optionbox').slideDown();
        } else {
            $('.optionbox').slideUp();
        }
        $(document).one('click', function (e) {
            $('#vdts').blur();
            $('#vdts').click(); 
            $('.optionbox').hide();
        })
        e.stopPropagation();
    });
    $('.optionbox').on('click', function (e) {
        e.stopPropagation();
   });

首先找到共同的状态 display,根据需求进行判断

3，复选框为图片时的操作：点一下是选中状态，再点一下是非选中状态

$('.vdts-top li .c-name').click(function() {
		var stateimg = $(this).find("img").attr('src');
		if(stateimg == 'img/uncheck.png'){
			$(this).find(" img").attr('src', 'img/checked.png');
			$(this).addClass('checked1');
		}else{
			$(this).find("img").attr('src', 'img/uncheck.png');
			$(this).removeClass('checked1');
		}
	});

4,判断勾选个数，进行页面切换

//多屏显示	
	$('.screennumber').click(function() {
		var state = $(this).find('span').html();
		if(state == "多屏查看") {
			var screens = $('.computerlist .checked1').length;
			if(screens <= 4 && screens > 0) {
				$(this).find('span').html("退出全屏");
				$('.fourscreen').css('display', 'block');
				$('.vdts-content').css('display', 'none');
				('.eightscreen').css('display', 'none');
			} else if(screens>4) {
				$(this).find('span').html("退出全屏");
				$('.eightscreen').css('display', 'block');
				$('.vdts-content').css('display', 'none');
				$('.fourscreen').css('display', 'none');
			}
		}
		else
		{
			$(this).find('span').html("多屏查看");
				$('.vdts-content').css('display', 'block');
				$('.fourscreen').css('display', 'none');
				$('.eightscreen').css('display', 'none');
		}
	});