Dev Faq
1
votes

Comment appliquer CSS à une variable jQuery?

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

J'ai un champ de date et un champ de sélection dont je stocke les valeurs dans une variable après que l'utilisateur sélectionne certaines valeurs. Je les affiche ensuite dans un conteneur div.

Ce que j'essaye de faire est:

  • J'essaie de leur appliquer un style CSS .

Après avoir exécuté le code, j'obtiens Pour la date entre '05 / 01/2019 'To '11 / 01/2019' et Outlet 'ALL' cette ligne

  • Je veux donner du style aux dates et aux points de vente avec de la couleur et les rendre audacieux.
  • Par exemple Pour la date comprise entre le '05 / 01/2019 ' et le '11 / 01/2019' et Outlet 'ALL'^
  • Je ne sais tout simplement pas comment ajouter du CSS aux variables jquery

Toute sorte de conseils serait donc utile.

4 commentaires

dans quels sélecteurs voulez-vous ajouter du CSS en utilisant jquery ??

@Sushil l'exemple que j'ai donné je veux faire comme ça, par exemple. Pour la date entre '05 / 01/2019 ' Au '11 / 01/2019' et Outlet 'ALL'

Vous ne pouvez pas styliser certains caractères arbitraires dans le contenu textuel de l'élément, vous devez envelopper ces parties avec des éléments appropriés.

enveloppez-le avec la balise ou enveloppez et ajoutez l'attribut class et ajoutez la propriété CSS

4 Réponses :

0
votes

Il serait plus facile d'utiliser simplement des balises strong : 

<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>
#fromDatetoDate span {
  font-weight: bold;
  color: red;
}

Si vous voulez le faire via 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);
  });
});
<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>
$(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);
  });
});

2 commentaires

ok celui-ci est cool ... mais que faire si je veux ajouter un peu de CSS comme les coiffer avec de la couleur et tout

J'ai mis à jour ma réponse avec une version css

0
votes

Enveloppez votre date et votre Outlet avec span et donnez-leur une classe comme ci-dessous. 

<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>
.bold {
  font-weight: bold;
}
$(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);
  });
});

0 commentaires
0
votes

Vérifiez le code ci-dessous. espérons que cela résout votre problème 

<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>
.date{
font-weight:bold;
color:red;
}
$(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);
  });
});

1 commentaires

Votre réponse serait améliorée avec une explication de votre approche du problème

0
votes

jQuery .html (htmlString) accepte une chaîne HTML.

En référence à l'exemple lors de la construction du mot clé displayDates, il peut être construit sous forme de chaîne HTML. Enveloppez-le dans une balise forte ou une balise span et appliquez des styles. 

<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>
.highlight {
  color: #66a95b;
}

.bold {
  font-weight: bold;
}
$(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);
  });
});

0 commentaires

Articles qui pourrait vous intéresser :

Impossible d'importer le module "@ angular / material"
Interaction profonde avec break and catch
Utilisation de node.js comment renommer tous les fichiers d'un dossier
Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO