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

Question

I'm currently building a filter with 5 options. The filter has an img with a 'prev' and 'next' div on either side. When you click either div , the img src changes to the adjacent src stored in an array . This works fine. Now I have a second filter. This filter will also have 5 options, except the 5 options available will depend on the option selected on the first filter. So filter1>option1 will result in options 1,2,3,4 and 5 being available on the second filter. filter1>option2 will result in options 6,7,8,9 and 10 being available on the second filter.

I'm trying to use the .onload listener so that when the filter one img loads, if filter1 source == A then filter two img src is pulled from array 1. If filter1 source == B then filter two img src is pulled from array 2.

I thought I'd explain my problem in pseudo for clarity. Here is a jsfiddle of my progress so far. http://jsfiddle.net/XujYW/

Thanks in advance!

Answer 1

The most important thing that is wrong in your code, is that you missinterpreted what $(function() { ..}) does. This is just a shortcut for $(document).ready() . It's fired after loading the page and NOT when anything changes on the page.

Then you use a very complicated way to find out the state of your list. You should have a look at jquerys data functions which allow you to bind data directly to an element. That's way more useable than your reading of img src and parsing it to get a simple index number. Look here (I left this approach as it is).

Next, you are repeating your code over and over. This makes it hard to handle especialy if you want to change anything. Better split reapeating parts of code into functions. This is what @thinklinux was requesting.

Anyhow, here is a working plunker (I prefer plunker because it's easier to debug and has a built in beautifier which makes code easier to read for those who want to help you).

I set up your values to arrays like that:

  // 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'];

An handle everyting over a single function:

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

This function itself calls apllyfilter with the last two parameters changed. This is not a very elegant approach (think spaghetticode!), but at least it works. Find the full code here