Question

我目前正在构建一个包含5个选项的过滤器。过滤器的img两侧都有'prev'和'next'div。当您click div时，img src会更改src中存储的相邻array。这很好用。现在我有第二个过滤器。此过滤器还有5个选项，但可用的5个选项取决于在第一个过滤器上选择的选项。因此filter1＆gt; option1将导致选项1,2,3,4和5在第二个过滤器上可用。 filter1＆gt; option2将导致选项6,7,8,9和10在第二个过滤器上可用。

我正在尝试使用.onload侦听器，以便当一个img加载过滤器时，如果filter1 source == A则过滤两个img src从数组1中拉出。如果filter1 source == B则过滤两个img src是从阵列2中拉出来的。

我认为为了清晰起见我会用伪解释我的问题。到目前为止，这是我进步的一个方面。 http://jsfiddle.net/XujYW/

提前致谢！

Answer 1

您的代码中最重要的错误是您错过了$(function() { ..})所做的事情。这只是$(document).ready()的快捷方式。它在加载页面后被解雇，而不是在页面上发生任何变化时被解雇。

然后，您使用一种非常复杂的方式来查找列表的状态。您应该查看jquerys数据函数，它允许您将数据直接绑定到元素。这比你读取img src和解析它以获得一个简单的索引号更有用。 Look here（我离开了这种方法）。

接下来，您将一遍又一遍地重复您的代码。如果你想改变什么，这使得特别难以处理。更好地将代码部分重新划分为函数。这就是@thinklinux的要求。

无论如何，这里有一个工作的plunker（我更喜欢plunker，因为它更容易调试，并且有一个内置的美化器，使代码更容易阅读，为那些想要帮助你的人。）

我将你的值设置为这样的数组：

  // A global array for convenience 
  subs = new Array();
  subs['Shelter'] = ['shelter-one', 'shelter-two', 'shelter-three', 'shelter-four', 'shelter-five'];
  subs['Food'] = ['food-one', 'food-two', 'food-three', 'food-four', 'food-five'];
  subs['Energy'] = ['energy-one', 'energy-two', 'energy-three', 'energy-four', 'energy-five'];
  subs['Transport'] = ['transport-one', 'transport-two', 'transport-three', 'transport-four', 'transport-five'];
  subs['Economy'] = ['economy-one', 'economy-two', 'economy-three', 'economy-four', 'economy-five'];
  setup_effects();

  var filterOne = ['shelter', 'food', 'energy', 'transport', 'economy'];

一个遍历单个函数的句柄：

  //Now setup the master filter
  //Parameters are:
  // Element to change
  // Array to use
  // Master filter
  // update on apply
  applyfilter('filter-one', filterOne, true, false);

此函数本身调用apllyfilter，最后两个参数已更改。这不是一个非常优雅的方法（想想spaghetticode！），但至少它是有效的。 Find the full code here

更改img src单击侦听器以更改第二个img src

1 个答案: