0 
<div id ="filter">
    <select id= "s1"/>
    <select id= "s2"/>
    <select id= "s3"/>
    <select id= "s4"/>
    <select id= "s5"/>
    <select id= "s6"/>
</div>

所以基本上我创建过滤器，其中每个过滤器具有不同 id 的选择元素，但数据填充和更改事件是相似的。所以我想创建一个类似这样的 API：

new Filter({ele1:$("#s1"), ele2:$("#s2"), ele3:$("#s3"), ele4:$("#s4")})

这个过滤器应该处理人口及其变化事件。

function Filter(map)
{
   this.ele1 = map.ele1.id;
   this.ele2 = map.ele2.id;
   //similarly for all the other elements.

   this.e1e1.change(function(){
       //these elements uses selectors of other elements So how can I access the ele2, ele3 and so on...
   });
}

这里的问题是更改事件应该能够访问过滤器对象的其他变量 ele2,ele3。

4

1 回答 1

1

我不太确定您的问题是什么，但通常这么多使用 ID-s 会适得其反，尤其是当您使用具有非常强大的选择器引擎的库时。

function addChangeEvents(selector) {
    //all your elements are in the selector, why bother with mapping them to an other array like object?

    selector.change(function () {
        var $this = $(this); //this is the element the change event is fired on

        selector.each(function () { //selector is the "list" of all elements
            //you can access all the elements of the selector
            console.log(this); //here this is the element you are iterating over.

            console.log(this.id);

            console.log($this); //you can access the $this variable defied in the outer function
        });
    });
}

你可以这样称呼它：

addChangeEvents($('#filter select'));

该变量selector将包含您需要的所有元素。即使在 addChangeEvents 代码执行后（在更改事件的回调中），它也将可用。

这回答了你的问题了吗？

编辑：

或者您正在映射，因为有多个选择列表：

<div id="filter">
    <select id="s1"/>
    <select id="s2"/>
    <select id="s3"/>
</div>
<div id="other_filter">
    <select id="s4"/>
    <select id="s5"/>
    <select id="s6"/>
</div>
etc...

在这种情况下，您可以多次调用 addChangeEvents 函数：

addChangeEvents($('#filter select'));
addChangeEvents($('#filter2 select'));

如果您添加如下类，您甚至可以遍历所有过滤器：

<div id="filter" class="filter">
    <select id="s1"/>
    <select id="s2"/>
    <select id="s3"/>
</div>
<div id="filter2" class="filter">
    <select id="s4"/>
    <select id="s5"/>
    <select id="s6"/>
</div>
<div id="filter3" class="filter">
    <select id="s7"/>
    <select id="s8"/>
    <select id="s9"/>
</div>

然后选择具有给定类的元素：

$('.filter').each(function () {
    addChangeEvents($(this).find('select'));
});
于 2013-05-21T06:27:46.613 回答