如何将CSS应用于jQuery变量？

Question

$(document).ready(function() {


  var today = new Date(new Date().getFullYear(), new Date().getMonth(),
    new Date().getDate());
  $('#startdate').datepicker({
    uiLibrary: 'bootstrap4',
    iconsLibrary: 'fontawesome',
    format: 'dd/mm/yyyy',

    maxDate: function() {
      return $('#enddate').val();

    }
  });
  $('#enddate').datepicker({
    uiLibrary: 'bootstrap4',
    iconsLibrary: 'fontawesome',
    format: 'dd/mm/yyyy',

    minDate: function() {
      return $('#startdate').val();
    },

  });

  $("#areaFormID").submit(function(event) {
    event.preventDefault();
    const currentlyClickedOutlet = $("#myselect").find(":selected")[0].textContent;
    var currentlyClickedStartdate = $("#startdate").val();
    var currentlyClickedenddate = $("#enddate").val();
    var displayDates = ("For the date between  '" + currentlyClickedStartdate + "'  To  '" + currentlyClickedenddate + "' and Outlet  '" + currentlyClickedOutlet + "'");
    $("#fromDatetoDate").html(displayDates);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/gijgo@1.9.6/css/gijgo.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/gijgo@1.9.6/js/gijgo.min.js" type="text/javascript"></script>
<div id="fromDatetoDate"></div>
<!--  this one to show dates  -->
<form id="areaFormID" method="get">
  <div class="container">
    <h4>Start Date:</h4>
    <input type="text" id="startdate" name="fromdate" width="276" placeholder="dd/mm/yyyy" required />
    <h4>End Date:</h4>
    <input type="text" id="enddate" name="todate" width="276" placeholder="dd/mm/yyyy" required />
    <h4>Outlets:</h4>
    <select name="outlet" id="myselect">

      <option>ALL</option>
      <option>1</option>
      <option>2</option>
    </select>

    <div>
      <br>
      <button id="btn-search" class="btn btn-default" type="submit">
					<i class="fa fa-search"></i>&nbsp;Search
				</button>
    </div>
  </div>
</form>

我有一个日期字段和一个选择字段，在用户选择了一些值之后，我将其值存储在变量中。然后将它们显示到div容器中。

我想做的是：

• 我正在尝试向他们应用一些css styling。

运行代码后，我得到此行的日期为'05 / 01/2019'到'11 / 01/2019'到出口'ALL'

• 我想用一些颜色设置日期和插座的样式，并使其加粗。
• 例如对于 '05 / 01/2019'至 '11 / 01/2019'和出口'ALL'
之间的日期
• 我只是不知道如何将CSS添加到jquery变量中

因此，任何形式的指导都将有所帮助。

Answer 1

仅使用strong标签会更容易：

$(document).ready(function() {


  var today = new Date(new Date().getFullYear(), new Date().getMonth(),
    new Date().getDate());
  $('#startdate').datepicker({
    uiLibrary: 'bootstrap4',
    iconsLibrary: 'fontawesome',
    format: 'dd/mm/yyyy',

    maxDate: function() {
      return $('#enddate').val();

    }
  });
  $('#enddate').datepicker({
    uiLibrary: 'bootstrap4',
    iconsLibrary: 'fontawesome',
    format: 'dd/mm/yyyy',

    minDate: function() {
      return $('#startdate').val();
    },

  });

  $("#areaFormID").submit(function(event) {
    event.preventDefault();
    const currentlyClickedOutlet = $("#myselect").find(":selected")[0].textContent;
    var currentlyClickedStartdate = $("#startdate").val();
    var currentlyClickedenddate = $("#enddate").val();
    var displayDates = ("For the date between  <strong>'" + currentlyClickedStartdate + "'</strong>  to  <strong>'" + currentlyClickedenddate + "'</strong> and Outlet <strong>'" + currentlyClickedOutlet + "'</strong>");
    $("#fromDatetoDate").html(displayDates);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/gijgo@1.9.6/css/gijgo.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/gijgo@1.9.6/js/gijgo.min.js" type="text/javascript"></script>
<div id="fromDatetoDate"></div>
<!--  this one to show dates  -->
<form id="areaFormID" method="get">
  <div class="container">
    <h4>Start Date:</h4>
    <input type="text" id="startdate" name="fromdate" width="276" placeholder="dd/mm/yyyy" required />
    <h4>End Date:</h4>
    <input type="text" id="enddate" name="todate" width="276" placeholder="dd/mm/yyyy" required />
    <h4>Outlets:</h4>
    <select name="outlet" id="myselect">

      <option>ALL</option>
      <option>1</option>
      <option>2</option>
    </select>

    <div>
      <br>
      <button id="btn-search" class="btn btn-default" type="submit">
					<i class="fa fa-search"></i>&nbsp;Search
				</button>
    </div>
  </div>
</form>

如果要通过CSS执行此操作：

$(document).ready(function() {


  var today = new Date(new Date().getFullYear(), new Date().getMonth(),
    new Date().getDate());
  $('#startdate').datepicker({
    uiLibrary: 'bootstrap4',
    iconsLibrary: 'fontawesome',
    format: 'dd/mm/yyyy',

    maxDate: function() {
      return $('#enddate').val();

    }
  });
  $('#enddate').datepicker({
    uiLibrary: 'bootstrap4',
    iconsLibrary: 'fontawesome',
    format: 'dd/mm/yyyy',

    minDate: function() {
      return $('#startdate').val();
    },

  });

  $("#areaFormID").submit(function(event) {
    event.preventDefault();
    const currentlyClickedOutlet = $("#myselect").find(":selected")[0].textContent;
    var currentlyClickedStartdate = $("#startdate").val();
    var currentlyClickedenddate = $("#enddate").val();
    var displayDates = ("For the date between  <span>'" + currentlyClickedStartdate + "'</span>  to  <span>'" + currentlyClickedenddate + "'</span> and Outlet <span>'" + currentlyClickedOutlet + "'</span>");
    $("#fromDatetoDate").html(displayDates);
  });
});

#fromDatetoDate span {
  font-weight: bold;
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/gijgo@1.9.6/css/gijgo.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/gijgo@1.9.6/js/gijgo.min.js" type="text/javascript"></script>
<div id="fromDatetoDate"></div>
<!--  this one to show dates  -->
<form id="areaFormID" method="get">
  <div class="container">
    <h4>Start Date:</h4>
    <input type="text" id="startdate" name="fromdate" width="276" placeholder="dd/mm/yyyy" required />
    <h4>End Date:</h4>
    <input type="text" id="enddate" name="todate" width="276" placeholder="dd/mm/yyyy" required />
    <h4>Outlets:</h4>
    <select name="outlet" id="myselect">

      <option>ALL</option>
      <option>1</option>
      <option>2</option>
    </select>

    <div>
      <br>
      <button id="btn-search" class="btn btn-default" type="submit">
					<i class="fa fa-search"></i>&nbsp;Search
				</button>
    </div>
  </div>
</form>

Answer 2

用span包裹您的约会和名店名，然后像下面这样给他们上课。

$(document).ready(function() {


  var today = new Date(new Date().getFullYear(), new Date().getMonth(),
    new Date().getDate());
  $('#startdate').datepicker({
    uiLibrary: 'bootstrap4',
    iconsLibrary: 'fontawesome',
    format: 'dd/mm/yyyy',

    maxDate: function() {
      return $('#enddate').val();

    }
  });
  $('#enddate').datepicker({
    uiLibrary: 'bootstrap4',
    iconsLibrary: 'fontawesome',
    format: 'dd/mm/yyyy',

    minDate: function() {
      return $('#startdate').val();
    },

  });

  $("#areaFormID").submit(function(event) {
    event.preventDefault();
    const currentlyClickedOutlet = $("#myselect").find(":selected")[0].textContent;
    var currentlyClickedStartdate = $("#startdate").val();
    var currentlyClickedenddate = $("#enddate").val();
    var displayDates = ("For the date between  '" + "<span class='bold'>" + currentlyClickedStartdate + "</span>" + "'  To  '" + "<span class='bold'>" + currentlyClickedenddate + "</span>" + "' and Outlet  '" + "<span class='bold'>" + currentlyClickedOutlet + "</span>" + "'");
    $("#fromDatetoDate").html(displayDates);
  });
});

.bold {
  font-weight: bold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/gijgo@1.9.6/css/gijgo.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/gijgo@1.9.6/js/gijgo.min.js" type="text/javascript"></script>
<div id="fromDatetoDate"></div>
<!--  this one to show dates  -->
<form id="areaFormID" method="get">
  <div class="container">
    <h4>Start Date:</h4>
    <input type="text" id="startdate" name="fromdate" width="276" placeholder="dd/mm/yyyy" required />
    <h4>End Date:</h4>
    <input type="text" id="enddate" name="todate" width="276" placeholder="dd/mm/yyyy" required />
    <h4>Outlets:</h4>
    <select name="outlet" id="myselect">

      <option>ALL</option>
      <option>1</option>
      <option>2</option>
    </select>

    <div>
      <br>
      <button id="btn-search" class="btn btn-default" type="submit">
					<i class="fa fa-search"></i>&nbsp;Search
				</button>
    </div>
  </div>
</form>

Answer 3

检查以下代码。希望这能解决您的问题

df = df.loc[df.timestamp.between(df.start_time,df.end_time), cols]\
       .set_index(['timestamp','Device'])\
       .reindex(index=df1.set_index(['timestamp','Device']).index)\
       .reset_index()

$(document).ready(function() {


  var today = new Date(new Date().getFullYear(), new Date().getMonth(),
    new Date().getDate());
  $('#startdate').datepicker({
    uiLibrary: 'bootstrap4',
    iconsLibrary: 'fontawesome',
    format: 'dd/mm/yyyy',

    maxDate: function() {
      return $('#enddate').val();

    }
  });
  $('#enddate').datepicker({
    uiLibrary: 'bootstrap4',
    iconsLibrary: 'fontawesome',
    format: 'dd/mm/yyyy',

    minDate: function() {
      return $('#startdate').val();
    },

  });

  $("#areaFormID").submit(function(event) {
    event.preventDefault();
    const currentlyClickedOutlet = $("#myselect").find(":selected")[0].textContent;
    var currentlyClickedStartdate = $("#startdate").val();
    var currentlyClickedenddate = $("#enddate").val();
    var displayDates = ("For the date between <span class='date'> '" + currentlyClickedStartdate + "'</span>  To  <span class='date'>'" + currentlyClickedenddate + "'</span> and Outlet  <span class='date'>'" + currentlyClickedOutlet + "'</span>");
    $("#fromDatetoDate").html(displayDates);
  });
});

.date{
font-weight:bold;
color:red;
}

Answer 4

jQuery .html（htmlString）接受HTML字符串。

在构造displayDates关键字时参考示例，可以将其构造为HTML字符串。用强标签或跨度标签将其包装并应用样式。

$(document).ready(function() {


  var today = new Date(new Date().getFullYear(), new Date().getMonth(),
    new Date().getDate());
  $('#startdate').datepicker({
    uiLibrary: 'bootstrap4',
    iconsLibrary: 'fontawesome',
    format: 'dd/mm/yyyy',

    maxDate: function() {
      return $('#enddate').val();

    }
  });
  $('#enddate').datepicker({
    uiLibrary: 'bootstrap4',
    iconsLibrary: 'fontawesome',
    format: 'dd/mm/yyyy',

    minDate: function() {
      return $('#startdate').val();
    },

  });

  $("#areaFormID").submit(function(event) {
    event.preventDefault();
    const currentlyClickedOutlet = $("#myselect").find(":selected")[0].textContent;
    var currentlyClickedStartdate = $("#startdate").val();
    var currentlyClickedenddate = $("#enddate").val();
    var displayDates = ("For the date between  <span class='bold highlight'>'" + currentlyClickedStartdate + "'</span>  To  <span class='bold highlight'>'" + currentlyClickedenddate + "'</span> and Outlet  <span class='bold highlight'>'" + currentlyClickedOutlet + "'</span>");
    $("#fromDatetoDate").html(displayDates);
  });
});

.highlight {
  color: #66a95b;
}

.bold {
  font-weight: bold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/gijgo@1.9.6/css/gijgo.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/gijgo@1.9.6/js/gijgo.min.js" type="text/javascript"></script>
<div id="fromDatetoDate"></div>
<!--  this one to show dates  -->
<form id="areaFormID" method="get">
  <div class="container">
    <h4>Start Date:</h4>
    <input type="text" id="startdate" name="fromdate" width="276" placeholder="dd/mm/yyyy" required />
    <h4>End Date:</h4>
    <input type="text" id="enddate" name="todate" width="276" placeholder="dd/mm/yyyy" required />
    <h4>Outlets:</h4>
    <select name="outlet" id="myselect">

      <option>ALL</option>
      <option>1</option>
      <option>2</option>
    </select>

    <div>
      <br>
      <button id="btn-search" class="btn btn-default" type="submit">
					<i class="fa fa-search"></i>&nbsp;Search
				</button>
    </div>
  </div>
</form>