javascript - 如何将 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他们应用一些。

运行代码后，我得到For the date between '05/01/2019' To '11/01/2019' 和 Outlet 'ALL'这一行

• 我想用一些颜色来设计日期和出口，并使它们变得大胆。
• 例如，对于'05/01/2019'到'11/01/2019'和 Outlet 'ALL'之间的日期
• 我只是不知道如何将 css 添加到 jquery 变量中

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

标签： javascriptjqueryhtmlcss

Answer 1

检查下面的代码。希望这能解决你的问题

$(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;
}

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