asked on

looping selectors and hiding field

I am trying to loop over selectors and based on each selector status, hide or show a particular field. My issue is that looping over the selectors is sequential so I may show the field for the first selector only to have it hidden by the last selector.

In my example, I have four fields and they each of an original value. I use a has_changes() function to determine if field value changes at all. Then there is another field called "status". So if the original value of aaa = 0 and it is changed to 2, then the status field will be displayed. If the value of aaa is returned to the value of 0 (in the same session) then it should hide status. However, if ccc also changed, then status will remain visible; basically status will only hide when those four fields have their original values (the status field is hidden when the page first loads).

The code is the 2nd one at the bottom. I completely see the problem with my logic so I know why it is not working. However, I don't know how to best code this, such as breaking out of the bind and returning a value such as true if any of the fields changed? Or is there a way to check all the fields at once with then hide/show the status field based on that true/false result?

I think I had this working at one point except that there were serious performance issues so I deleted all of that code. I believe what I did was something like this. Other than this having performance issues, it also requires that I hard code each of the fields. I am hoping for a more elegant approach to this. At least it seems to work properly but I would like to know if there's a better way to accomplish this.

$("#aaa, #bbb, #ccc, #ddd").addClass("myclass");
$(".myclass").bind("change.item"), function()
{
   if(has_changes("aaa") || has_changes("bbb") || has_changes("ccc") || has_changes("ddd"))
  {
     // show the status field
  }
 else
  {
    // hide the status field
  }
});

Open in new window

$("#aaa, #bbb, #ccc, #ddd").addClass("myclass");
$(".myclass").bind("change.item"), function()
{
  var hasChanges = false;
  if(has_changes(this.id)
  {
    console.log(this.id + has changed");
   hasChanges = true;
  }
  if(hasChanges)
  {
    // show "status" field
  }
  else
  {
    // hide "status" field
  }
});

Open in new window

Member_2_248744

greetings mock5c , , I can not closely follow some of your logic you say for this, , I tend to try and use binary (on or off) logic for this kind of thing. Since the value (original) is false (zero) then that's the test , as -
on change func
if ($("#aaa").val() != '0') $("#stat").show(); else
if( ($("#bbb").val() != '0') && ($("#ccc").val() != '0') ) && ($("#ddd").val() != '0')
$("#stat").hide();

- - - - - - - - - - -
OR to can use a JS variable or element "data" set to record the current show-hide state and if it is already show, or hidden then just return out of the function.

it is also possible to use an array or object to record the current status of all elements in play, the status is visible, and the 4, 8, 20 different selectors.

- - - - -

var selNot0 = [];

change.item"), function() {
if (this.value != '0') {
$("#stat").show();
selNot0.push(this.id);
} else {
var io = selNot0.indexOf(this.id);
if(io > -1) {
if (io == 0) selNot0.shift(); else
selNot0.splice(--io, 1);
}
if (!selNot0.length) $("#stat").hide();
}

}

this is untested, and will not work as written, just from memory, but may show you something.

ASKER CERTIFIED SOLUTION

Member_2_248744

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial