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

Question

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

Answer 1

注意看手册

• 不确定的父级 需要使用 .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');
});

Answer 2

感觉这种写法比较混乱啊。如果文章标题和按钮的结构又变了，那你是不是还需要再去手动改呢？可以试试先把DOM元素缓存起来，需要的时候再调用。

Answer 3

这已经是最一目了然的方法了，维护也很方便，要么就在列表生成的方法里给每项绑id。

Answer 4

或許你會想要自已弄個事件

https://jsfiddle.net/cwen0708...

var dom_listen = {
    "listen": function (event_name, dom, func) {
        var insertItem = {"dom": dom, "func": func};
        if (typeof dom_listen.events[event_name] === "undefined") {
            dom_listen.events[event_name] = [insertItem];
        } else {
            dom_listen.events[event_name].push(insertItem)
        }
    },
    "events": {},
    "trigger": function (event_name, data) {
        if (typeof dom_listen.events[event_name] === "undefined") {return}
        var events = dom_listen.events[event_name];
        for (var i=0;i<events.length;i++){
            var ei = events[i];
            if (typeof ei.func === "undefined") {break}
            $(ei.dom).each(function(dom_index){
                ei.func($(this).data("dom_index", dom_index), data);
            });
        }
    }
};

// 註冊事件
dom_listen.listen("button_click", "span", function(target, data){
    if ($("span").index(target) == data.index){
        $(target).text(parseInt($(target).text()) + 1);
    }
});

$("button").click(function(){
    // 觸發, 並傳資料
    dom_listen.trigger("button_click", {"index": $("button").index(this)});
    // 或者直接把自已傳給目標
    // dom_listen.trigger("button_click", $(this));
})

Answer 5

推荐closest