jquery - How to use if condition in string concatenation

Question

I want to show button update if z != null else will show generate. I have written code but it's lengthy. Can anyone please update my code by using if within the concatenation before the button so that if z != null it will show update else will show generate and then I will not have to write same code again

if (z != null) {
  b += '<div class="col-sm-7 center-div"><h4 class="main-heading">Set report parameters of <strong>' + a + '&nbsp' + c + '</strong> for : <strong>' + data.employeeName + '</strong></h4><form id="report_param" method="post"><div class="panel panel-success"><div class="panel-heading"><i class="fa fa-plus-circle"></i> Set Report Parametrs</div>' +
    '<div class="panel-body"><div class="form-group"><label>Year</label><input type="text" class="form-control" value="' + c + '" placeholder="Enter Year" readonly /></div>' +
    '<div class="form-group"><label>Month</label><input type="text" class="form-control" value="' + a + '" placeholder="Enter Month" readonly /></div>' +
    '<div class="panel-footer"><button class="btn btn-primary update" type="submit" name="submit"><i class="fa fa-check-square-o"></i> Update</button></div></div><input name="test" type="hidden" value="' + data.id + '" data="' + data.id + '"></form></div>';
} else {
  b += '<div class="col-sm-7 center-div"><h4 class="main-heading">Set report parameters of <strong>' + a + '&nbsp' + c + '</strong> for : <strong>' + data.employeeName + '</strong></h4><form id="report_param" method="post"><div class="panel panel-success"><div class="panel-heading"><i class="fa fa-plus-circle"></i> Set Report Parametrs</div>' +
    '<div class="panel-body"><div class="form-group"><label>Year</label><input name="yea" type="text" class="form-control" value="' + c + '" placeholder="Enter Year" readonly /></div>' +
    '<div class="form-group"><label>Month</label><input type="text" name="mon" class="form-control" value="' + a + '" placeholder="Enter Month" readonly /></div>' +
    '<div class="panel-footer"><a href="#" class="btn btn-success generate"><i class="fa fa-flag"></i> Generate Report</a></div></div><input name="test" type="hidden" value="' + id + '" data="' + id + '"></form></div>';
}

标签： jquery

Answer 1

If all you need to change between the conditions is the button class and text you can create variables to hold the values based on the state of z, then concatenate the output in to b, like this:

var b = '',
  buttonClass = 'update',
  buttonText = 'Update';

if (z === null) {
  buttonClass = 'generate';
  buttonText = 'Generate Report';
}

b += '<div class="col-sm-7 center-div"><h4 class="main-heading">Set report parameters of <strong>' + a + '&nbsp' + c + '</strong> for : <strong>' + data.employeeName + '</strong></h4><form id="report_param" method="post"><div class="panel panel-success"><div class="panel-heading"><i class="fa fa-plus-circle"></i> Set Report Parametrs</div>' +
  '<div class="panel-body"><div class="form-group"><label>Year</label><input type="text" class="form-control" value="' + c + '" placeholder="Enter Year" readonly /></div>' +
  '<div class="form-group"><label>Month</label><input type="text" class="form-control" value="' + a + '" placeholder="Enter Month" readonly /></div>' +
  '<div class="panel-footer"><button class="btn btn-primary ' + buttonClass + '" type="submit" name="submit"><i class="fa fa-check-square-o"></i> ' + buttonText + '</button></div></div><input name="test" type="hidden" value="' + data.id + '" data="' + data.id + '"></form></div>';

Also note that if you don't need IE support then you can use template literals to make the string concatenation a little less ugly:

b += `<div class="col-sm-7 center-div">
  <h4 class="main-heading">
    Set report parameters of 
    <strong>${a}&nbsp${c}</strong> 
    for : 
    <strong>${data.employeeName}</strong>
  </h4>
  <form id="report_param" method="post">
    <div class="panel panel-success">
      <div class="panel-heading">
        <i class="fa fa-plus-circle"></i> 
        Set Report Parametrs
      </div>
      <div class="panel-body">
        <div class="form-group">
          <label>Year</label>
          <input type="text" class="form-control" value="${c}" placeholder="Enter Year" readonly />
        </div>
        <div class="form-group">
          <label>Month</label>
          <input type="text" class="form-control" value="${a}" placeholder="Enter Month" readonly />
        </div>
        <div class="panel-footer">
          <button class="btn btn-primary ${buttonClass}" type="submit" name="submit">
            <i class="fa fa-check-square-o"></i> 
            ${buttonText}
          </button>
        </div>
      </div>
      <input name="test" type="hidden" value="${data.id}" data="${data.id}">
  </form>
</div>`;

You can also see from the above that you're missing a </div> tag.