jquery - 前端页面中绑定事件时操作对应的DOM元素

问题描述

问 题

类似于文章列表的时候， 比如点击列表中某一个按钮，操作这个列表项中的文章标题， 我的操作方法总是基于一个按钮去找各种对应的元素，比如 $(btn).parent().parent().next() ...这种非常不舒服的方式， 显得特别不优雅， 有什么更清晰的设计方法吗. 在没有使用MV*框架的情况下。

解决方案

注意看手册

• 不确定的父级 需要使用 .closest()

• 兄弟关系 需要使用.siblings()

• jQuery([selector,[context]]) 缩小查找范围

示例：

<div class="tools"><div class="btn"><a href="">按钮</a></div></div>
<div class="title">标题</div>
<div class="tools"><div class="btn"><a href="">按钮</a></div></div>
<div class="title">标题</div>


$('a', '.btn').on('click', function(){
    $(this).closest('.tools').next().css('color', 'red');
});

这篇关于jquery - 前端页面中绑定事件时操作对应的DOM元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！