Question

如果其他z != null会显示generate，我想显示按钮更新。我已经写了代码，但是很长。任何人都可以通过在if之前的串联中使用button来更新我的代码，以便如果z != null将显示更新，否则将显示generate，那么我将不必再次编写相同的代码

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>';
}

Answer 1

如果您需要在条件之间进行更改的是按钮类和文本，则可以创建变量以根据z的状态保存值，然后将输出连接到b中，例如这个：

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

还请注意，如果不需要IE支持，则可以使用模板文字使字符串连接变得不那么难看：

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>`;

从上方您还可以看到您缺少</div>标签。

如何在字符串连接中使用if条件

1 个答案: