通过jquery选择器进行迭代

Question

I have codes that I am sure are pretty redundant and I want to make it shorter and cleaner.

So I have a list of five domains that has a slider for each. I'm using the Simple Slider five times. I have this:

$("#domain-1").bind("slider:changed", function (event, data) {
  alert(data.value);
  alert(data.ratio);
});

$("#domain-2").bind("slider:changed", function (event, data) {
  alert(data.value);
  alert(data.ratio);
});

$("#domain-3").bind("slider:changed", function (event, data) {
  alert(data.value);
  alert(data.ratio);
});

$("#domain-4").bind("slider:changed", function (event, data) {
  alert(data.value);
  alert(data.ratio);
});

$("#domain-5").bind("slider:changed", function (event, data) {
  alert(data.value);
  alert(data.ratio);
});

How do I simplify this so I don't have to repeat the codes? I have to use IDs cause each slider should be unique. Thank you!

Answer 1

Use Multiple Selector (“selector1, selector2, selectorN”)

$("#domain-1, #domain-2,#domain-3,#domain-4,#domain-5").bind("slider:changed", function (event, data) {
  alert(data.value);
  alert(data.ratio);
});

Answer 2

Assigning a class to them all may work out easier.

$(".domains").bind("slider:changed", function (event, data) {
    alert(data.value);
    alert(data.ratio);
 });