Javascript-API编写

此筛选器应处理填充及其更改事件

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

---

这里的问题是更改事件应该能够访问筛选器对象的其他变量ele2、ele3

我不太确定您的问题是什么，但通常使用ID-s进行如此多的处理会适得其反，特别是当您使用具有非常强大的选择器引擎的库时

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...
   });
}

你可以这样称呼它：

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代码之后（在change事件的回调中），它也将可用

这回答了你的问题吗

---

编辑：

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

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

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

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

---

为什么不只查询包含

-s的

，然后在里面找到所有的选择，而不必担心它们的ID？在我看来，您只能使用静态js。是的，再次需要为每个select元素编写更改事件。我们可以在过滤器（地图）中做些什么吗。其他api（如highcharts）是如何处理这些事情的。我不明白为什么您将

Filter

函数称为api。您能否澄清您想要什么？选择元素的更改事件将更改下一个选择选项的可用选项。我认为在一个页面中有许多select元素，对它们进行迭代不是一个好主意，我不是在对所有的

元素进行迭代

$（“#过滤器选择”）

迭代

中的

元素。您可以将该选择器更改为

$（'#s1，#s2，#s3'）

，但在我看来，硬编码ID-s是您需要避免的事情。我已经向您介绍了一个解决方案，它通过元素的环境而不是ID来选择元素。

<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($('#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'));
});