title: trying to simplify a function by making it dynamic depending on the variable being be passed
body: <p>I am not sure how to word what I am trying to do, but if you look at my code you will see very quickly. I believe I am close to accomplishing what I am trying to do but I am missing some small pieces. If anyone could help I would be greatly appreciative.
  Basically, I am trying to shorten up my code and make it more dynamic.</p>
  
  <p>The problem is that <code>healthSign</code> doesn't get the class correctly.  When I look at the inspector, this is what is outputting <code>&lt;div class="signImage ' + healthValue"&gt;</code> when it should be <code>&lt;div class="signImage good"&gt;</code>.</p>
  
  <p>I believe the mix up is that I am trying to pass a variable as a string and as a object and that I am not using the correct punctuation or syntax.</p>
  
  <p>Here is my jquery:</p>
  
  <pre><code>$("#click").click(function () {
      var func = $("#run").val(),
          signP = $('.signImage').find('p'),
          bodyConditionP = $('#bodyCondition').find('p'),
          reproductionP = $('#reproduction').find('p'),
          weaningWeightsP = $('#weaningWeights').find('p'),
          healthSign = $('.signImage');
      signP.empty();
      bodyConditionP.empty();
      reproductionP.empty();
      weaningWeightsP.empty();
      console.log(func);
  
      function blah(healthValue) {
          signP.append(healthValue.sign);
          healthSign.attr('class', 'signImage');
          alert(healthValue);
          healthSign.addClass("' + healthValue + '");
          signP.append(healthValue.sign);
          bodyConditionP.append(healthValue.bodyCondition);
          reproductionP.append(healthValue.reproduction);
          weaningWeightsP.append(healthValue.weaningWeights);
      }
      if (func === 'good') {
          blah(good);
      }
      else if (func === 'moderate') {
          blah(moderate);
      }
      else if (func === 'poor') {
          blah(poor);
      }
  });
  </code></pre>
  
  <p>This was the longer version of my script:</p>
  
  <pre><code>$("#click").click(function () {
      var func = $("#run").val(),
          signP = $('.signImage').find('p'),
          bodyConditionP = $('#bodyCondition').find('p'),
          reproductionP = $('#reproduction').find('p'),
          weaningWeightsP = $('#weaningWeights').find('p'),
          healthSign = $('.signImage');
      signP.empty();
      bodyConditionP.empty();
      reproductionP.empty();
      weaningWeightsP.empty();
      console.log(func);
      if (func === 'good') {
          console.log('good');
          signP.append(good.sign);
          healthSign.attr('class', 'signImage');
          healthSign.addClass('good');
          signP.append(good.sign);
          bodyConditionP.append(good.bodyCondition);
          reproductionP.append(good.reproduction);
          weaningWeightsP.append(good.weaningWeights);
      }
      else if (func === 'moderate') {
          console.log('moderate');
          signP.append(moderate.sign);
          signP.append(good.sign);
          healthSign.attr('class', 'signImage');
          healthSign.addClass('moderate');
          signP.append(moderate.sign);
          bodyConditionP.append(moderate.bodyCondition);
          reproductionP.append(moderate.reproduction);
          weaningWeightsP.append(moderate.weaningWeights);
      }
      else if (func === 'poor') {
          console.log('poor');
          signP.append(poor.sign);
          healthSign.attr('class', 'signImage');
          healthSign.addClass('poor');
          signP.append(poor.sign);
          bodyConditionP.append(poor.bodyCondition);
          reproductionP.append(poor.reproduction);
          weaningWeightsP.append(poor.weaningWeights);
      }
  });
  </code></pre>