如何使用jquery创建html模板作为字符串？

Question

我有一个动态模态作为字符串，当你点击按钮我创建这个模态。 （我没有使用任何模板框架只有js）

所以我的html中有两个日期属性：<a [routerLink]="['/inventory/clientpurchaseorder/add']" [queryParams]="{vendor_id:selectedVendor ? selectedVendor.id : ''}" class="btn btn-info" > 和data-open-hours我在模态打开时控制了这个日期..

如果你看看我的演示，你会看到问题。我跟你解释。

如果您先点击data-closed-hours，请参阅代理商1模式将创建为字符串  并将以js打开。

所以关闭See Agency 1后，如果您打开See Agency 1，您会看到See Agency 2将会打开..

但是如果你刷新页面，如果你先点击See Agency 1，你会看到 一旦关闭See Agency 2，如果您尝试See agency 2，see agency 1将会开启

首先点击哪一个模态已打开

所以我猜我的事件是错误的，或者我的js函数用于创建html模板

我的错误在哪里？

抱歉我的英语不好。

＆＃13;

＆＃13;

See agency 2

＆＃13;

var openHours;
var closedHours;

function agencyModal(modalName, modalWidth, modalHeight, openHours, closedHours) {
  console.log("Open: " + openHours + " Closed hours: " + closedHours);
  var html =
    '<div class="modal fade agencyModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"><div class="modal-dialog" role="document" style="width:' + modalWidth + ';height:' + modalHeight + '"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>';
  html = html + '<h4 class="modal-title" id="myModalLabel">' + modalName + "</h4></div>";
  html = html + '<div class="modal-body">';
  html = html + '<div class="row"><div class="col-lg-12"><input type="text" class="form-control" placeholder="Adınız ve Soyadınız" name="adsoyad"></div></div>';
  html = html + '<div class="row"><div class="col-lg-12"><input type="text" class="form-control" placeholder="E-posta Adresiniz" name="adsoyad"></div></div>';
  html = html + '<div class="row"><div class="col-lg-12"><input type="text" class="form-control tel-number" placeholder="Telefon Numaranız" name="telnumber"></div></div>';
  html = html + '<div class="row"><div class="col-lg-6"><select class="when-call form-control"><option class="call-today">Call Today</option><option class="call-tomorrow">Call Tomorrow</option></select></div><div class="col-lg-6">';
  html = html + '<select class="hour-call form-control">' + getOptions(openHours, closedHours, true) + '</select></div></div>';
  html = html + '<div class="row"><div class="col-lg-12"><button type="button" class="btn btn-success">Gönder</button></div></div></div>';
  html = html + '<div class="modal-footer"><button type="button" class="btn btn-popup-kapat" data-dismiss="modal">Kapat</button></div>';
  html = html + '</div></div></div>';
  // check length and append if it is not added before
  !$(".agencyModal").length && $(document.body).append(html);
  $(".agencyModal").modal();
}


$(document).on("click", ".open-agency", function() {
  openHours = $(this).data("open-hours");
  closedHours = $(this).data("closed-hours");
  agencyName = $(this).data("name");
  agencyModal(agencyName, "40%", "500px", openHours, closedHours);
});

function callNow() {
  return '<option class="call-now">Hemen Ara</option>';
}

function getOptions(open, close, now) {
  var options = now ? callNow() : '';
  console.log(open, close, now);
  // get open/close time as hours only
  var start = open.split(':')[0];
  var end = close.split(':')[0];
  // using +start will convert to a base 10 number - avoiding the problem that numbers with a leading zero are octal numbers
  var dt = new Date();
  var time = dt.getHours()
  // loop and add an option for each
  for (var h = +start; h <= +end; h++) {
    if (time < h && now == true) {
      options += '<option>' + h + ':00 - ' + (h + 1) + ':00 Arası</option>'
    } else if (!now) {
      options += '<option>' + h + ':00 - ' + (h + 1) + ':00 Arası</option>'
    }
  }
  return options;
}

$(document).on("change", ".when-call", function(event) {
  // not the most efficient way, but you can always remove 'Call now', then add it back only if needed
  $(".hour-call .call-now").remove();
  $('.hour-call option').remove();
  if ($('.call-today').is(':selected')) {
    $('.hour-call').prepend(getOptions(openHours, closedHours, true));
  } else {
    $('.hour-call').prepend(getOptions(openHours, closedHours, false))
  }
});

＆＃13;

.open-agency {
  border: 3px solid #ccc;
  display: inline-block;
  padding: 12px;
  font-size: 14px;
  margin: 100px;
  cursor: pointer;
  box-shadow: 0px 0px 10px #ccc;
}

.open-agency:hover {
  background: #050505;
  color: #fff;
  border-color: #000;
}

＆＃13;

＆＃13;

＆＃13;

CodePen Demo

Answer 1

只需更改现有模板的内容：

var openHours;
var closedHours;

function agencyModal(modalName, modalWidth, modalHeight, openHours, closedHours) {
  console.log("Open: " + openHours + " Closed hours: " + closedHours);
  $(".modal-dialog").css({
    "width": modalWidth,
    "height": modalHeight
  });
  $(".hour-call").html(getOptions(openHours, closedHours, true));
  $(".modal-title").html(modalName);
  $(".agencyModal").modal();
}


$(document).on("click", ".open-agency", function() {
  openHours = $(this).data("open-hours");
  closedHours = $(this).data("closed-hours");
  agencyName = $(this).data("name");
  agencyModal(agencyName, "40%", "500px", openHours, closedHours);
});

function callNow() {
  return '<option class="call-now">Hemen Ara</option>';
}

function getOptions(open, close, now) {
  var options = now ? callNow() : '';
  console.log(open, close, now);
  // get open/close time as hours only
  var start = open.split(':')[0];
  var end = close.split(':')[0];
  // using +start will convert to a base 10 number - avoiding the problem that numbers with a leading zero are octal numbers
  var dt = new Date();
  var time = dt.getHours()
  // loop and add an option for each
  for (var h = +start; h <= +end; h++) {
    if (time < h && now == true) {
      options += '<option>' + h + ':00 - ' + (h + 1) + ':00 Arası</option>'
    } else if (!now) {
      options += '<option>' + h + ':00 - ' + (h + 1) + ':00 Arası</option>'
    }
  }
  return options;
}

$(document).on("change", ".when-call", function(event) {
  // not the most efficient way, but you can always remove 'Call now', then add it back only if needed
  $(".hour-call .call-now").remove();
  $('.hour-call option').remove();
  if ($('.call-today').is(':selected')) {
    $('.hour-call').prepend(getOptions(openHours, closedHours, true));
  } else {
    $('.hour-call').prepend(getOptions(openHours, closedHours, false))
  }
});

.open-agency {
  border: 3px solid #ccc;
  display: inline-block;
  padding: 12px;
  font-size: 14px;
  margin: 100px;
  cursor: pointer;
  box-shadow: 0px 0px 10px #ccc;
}

.open-agency:hover {
  background: #050505;
  color: #fff;
  border-color: #000;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<p class="open-agency" data-toggle="modal" data-target=".agencyModal" data-open-hours="09:00" data-closed-hours="22:00" data-name="Agency 1">See Agency 1</p>

<p class="open-agency" data-toggle="modal" data-target=".agencyModal" data-open-hours="07:00" data-closed-hours="20:00" data-name="Agency 2">See Agency 2</p>


<div class="modal fade agencyModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel"></h4>
      </div>
      <div class="modal-body">
        <div class="row"><div class="col-lg-12"><input type="text" class="form-control" placeholder="Adiniz ve Soyadiniz" name="adsoyad"></div></div>
        <div class="row"><div class="col-lg-12"><input type="text" class="form-control" placeholder="E-posta Adresiniz" name="adsoyad"></div></div>
        <div class="row"><div class="col-lg-12"><input type="text" class="form-control tel-number" placeholder="Telefon Numaraniz" name="telnumber"></div></div>
        <div class="row"><div class="col-lg-6">
            <select class="when-call form-control"><option class="call-today">Call Today</option><option class="call-tomorrow">Call Tomorrow</option></select></div>
          <div class="col-lg-6">
            <select class="hour-call form-control"></select></div>
        </div>
        <div class="row"><div class="col-lg-12"><button type="button" class="btn btn-success">Gönder</button></div></div>
      </div>
      <div class="modal-footer"><button type="button" class="btn btn-popup-kapat" data-dismiss="modal">Kapat</button></div>
    </div>
  </div>
</div>






<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

Answer 2

您的问题在这一行：

$('.agencyModal, .modal-backdrop').remove();
$( 'body' ).removeClass('modal-open');

第一次后，第一部分返回false，因此永远不会添加新的html。

此外，动态创建新模态并不会删除旧模式。

您需要在添加新模式之前删除之前添加的模态：

var openHours;
var closedHours;

function agencyModal(modalName, modalWidth, modalHeight, openHours, closedHours) {
  console.log("Open: " + openHours + " Closed hours: " + closedHours);
  var html = '<div class="modal fade agencyModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"><div class="modal-dialog" role="document" style="width:' + modalWidth + ';height:' + modalHeight + '"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>';
  html = html + '<h4 class="modal-title" id="myModalLabel">' + modalName + "</h4></div>";
  html = html + '<div class="modal-body">';
  html = html + '<div class="row"><div class="col-lg-12"><input type="text" class="form-control" placeholder="Adınız ve Soyadınız" name="adsoyad"></div></div>';
  html = html + '<div class="row"><div class="col-lg-12"><input type="text" class="form-control" placeholder="E-posta Adresiniz" name="adsoyad"></div></div>';
  html = html + '<div class="row"><div class="col-lg-12"><input type="text" class="form-control tel-number" placeholder="Telefon Numaranız" name="telnumber"></div></div>';
  html = html + '<div class="row"><div class="col-lg-6"><select class="when-call form-control"><option class="call-today">Call Today</option><option class="call-tomorrow">Call Tomorrow</option></select></div><div class="col-lg-6">';
  html = html + '<select class="hour-call form-control">' + getOptions(openHours, closedHours, true) + '</select></div></div>';
  html = html + '<div class="row"><div class="col-lg-12"><button type="button" class="btn btn-success">Gönder</button></div></div></div>';
  html = html + '<div class="modal-footer"><button type="button" class="btn btn-popup-kapat" data-dismiss="modal">Kapat</button></div>';
  html = html + '</div></div></div>';
  // check length and append if it is not added before
  // !$(".agencyModal").length && $(document.body).append(html);

  //
  //  remove previous modal if it exists
  // 
  $('.agencyModal, .modal-backdrop').remove();
  $( 'body' ).removeClass('modal-open');
  
  //
  // add the new one
  //
  $(document.body).append(html);
  $('.agencyModal').modal();
}

$(document).on("click", ".open-agency", function() {
  openHours = $(this).data("open-hours");
  closedHours = $(this).data("closed-hours");
  agencyName = $(this).data("name");
  agencyModal(agencyName, "40%", "500px", openHours, closedHours);
});

function callNow() {
  return '<option class="call-now">Hemen Ara</option>';
}

function getOptions(open, close, now) {
  var options = now ? callNow() : '';
  console.log(open, close, now);
  // get open/close time as hours only
  var start = open.split(':')[0];
  var end = close.split(':')[0];
  // using +start will convert to a base 10 number - avoiding the problem that numbers with a leading zero are octal numbers
  var dt = new Date();
  var time = dt.getHours()
  // loop and add an option for each
  for (var h = +start; h <= +end; h++) {
      if (time < h && now == true) {
          options += '<option>'+h+':00 - '+(h+1)+':00 Arası</option>'
      } else if (!now) {
          options += '<option>'+h+':00 - '+(h+1)+':00 Arası</option>'
      }
  }
  return options;
}

$(document).on("change", ".when-call", function(event) {
  // not the most efficient way, but you can always remove 'Call now', then add it back only if needed
  $(".hour-call .call-now").remove();
  $('.hour-call option').remove();
  if ($('.call-today').is(':selected')) {
      $('.hour-call').prepend(getOptions(openHours, closedHours, true));
  } else {
      $('.hour-call').prepend(getOptions(openHours, closedHours, false))
  }
});

.open-agency {
    border: 3px solid #ccc;
    display: inline-block;
    padding: 12px;
    font-size: 14px;
    margin: 100px;
    cursor: pointer;
    box-shadow: 0px 0px 10px #ccc;
}

.open-agency:hover {
    background: #050505;
    color: #fff;
    border-color: #000;
}
.agencyModal .row{
    margin-bottom:10px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<p class="open-agency" data-toggle="modal" data-target=".agencyModal" data-open-hours="09:00" data-closed-hours="22:00" data-name="Podium Avm">See Agency</p>

<p class="open-agency" data-toggle="modal" data-target=".agencyModal" data-open-hours="07:00" data-closed-hours="20:00" data-name="Another Agency Name">See Agency 2</p>

{{1}}