jquery通过class多级选择

最新推荐文章于 2022-08-30 17:59:33 发布

原创最新推荐文章于 2022-08-30 17:59:33 发布 · 3.6k 阅读

1 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

30 篇文章

订阅专栏

本文介绍了一段JavaScript代码，该代码实现了一个点击事件监听器的功能。当点击指定的HTML元素时，会触发一系列的DOM操作，包括改变元素的尺寸和透明度等。此外，还提供了一个具体的HTML示例来展示如何使用此类JavaScript代码。

$(".bm-quality .bm-toolbar-action .quality-screening").on('click', function() {
            var option = {
                width : "565px",
                height : "830px",
                opacity : 1
            };

            var filter = $(".bm-quality-filter-default");

            if ($(filter).hasClass('bm-quality-filter-open')) {
                option = {
                    width : "0px",
                    height : "0px",
                    opacity : 0
                };
            }  
        this.loadData();
    },

以上js代码

下面给出html代码

	<div class="bm-quality">
		<div class="bm-toolbar-action">
			<ul>
				<li class="bm-border-radius">
					<i class="fa fa-bars"></i>
				</li>
			
				<li class="bm-border-radius" style="margin: 6px 20px;" data-toggle="modal" data-target="#bm-moudle-quality-addProblem-Modal">
					<i class="fa fa-plus"></i>
					<span style="cursor: pointer;">添加</span>
				</li>
				<li class="bm-border-radius">
					导入
				</li>
				<li class="bm-border-radius">
					导出
				</li>
				<li>
					<img src="<c:url value='/resources/images/icon/screening.png'/>" class="quality-screening" />
				</li>

点击class为quality-screening js会触发响应事件,

js思路通过选择class 点号选择器，其实直接选择最后一个class也可以当然不要有重复

$(".quality-screening").on('click', function() {

这种写法比find 子节点简洁一些