jQuery循环判断点击的那个节点

最新推荐文章于 2022-12-02 20:44:35 发布

原创最新推荐文章于 2022-12-02 20:44:35 发布 · 608 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#乔乐共享 #jquery #click #element #ViewUI

jQuery 专栏收录该内容

46 篇文章

订阅专栏

本文展示了一个使用 jQuery 实现的图片切换效果示例。通过点击左侧的小图，可以更换右侧显示的大图。该示例利用了 jQuery 的 click 事件和 attr 方法来实现交互效果。


<div class="three_ad_container">
		<div class="main_ad_container"><img src="/images/insurance/3lianad.jpg" /></div>
		<div class="left_tree_ad_btn_container">
			<ul>
				<li class="tree_ad_btn_bg"><img src="/images/insurance/3lianad_small.jpg" /></li>
			</ul>
			<ul>
				<li class="tree_ad_btn_bg have_bg"><img src="/images/insurance/3lianad_small.jpg" /></li>
			</ul>
			<ul>
				<li class="tree_ad_btn_bg"><img src="/images/insurance/3lianad_small.jpg" /></li>
			</ul>
		</div>
	</div>


jQuery(".left_tree_ad_btn_container > ul > li").click(function(){
		jQuery(".have_bg").removeClass("have_bg");
		var objLi = jQuery(this);
		objLi.attr("class", "tree_ad_btn_bg have_bg");
		jQuery.each(jQuery(".left_tree_ad_btn_container > ul > li"), function(index, value){
			if(jQuery(this).attr("class") == objLi.attr("class")){
				alert(index);
			// jQuery(".main_ad_container > img").attr("src", "/images/insurance/01_bg.png");
			}
		});
	});

[img]http://ww3.sinaimg.cn/large/51baa38ejw1dwddy01yv4j.jpg[/img]