Réécriture de titre : une technique pour mettre l'accent sur des valeurs spécifiques sur une page
P粉588152636
P粉588152636 2023-09-05 09:37:49
0
1
447
<p>Par exemple, sur un site comme</p> <p>Comment puis-je coder pour mettre en évidence tout prix supérieur à 20 € en rouge dans la grille des produits ? De plus, j'en ai besoin pour continuer à travailler même si l'utilisateur sélectionne/désélectionne une catégorie sur la droite. </p> <p>Est-ce du JavaScript ? </p> <pre class="brush:php;toolbar:false;">$('div').each(function() { $(this).find('.mErEH _223RA').sort(function(a, b) { return b.innerText - a.innerText; }).slice(0, 5).addClass('supérieur à 20') });</pré> <pre class="brush:php;toolbar:false;">.higherthan20 { La couleur rouge; }</pre></p>
P粉588152636
P粉588152636

répondre à tous(1)
P粉315680565

Sites Web référencés Filtrez les prix en affichant uniquement ceux qui correspondent à une fourchette définie par l'utilisateur, tout en supprimant tous les prix qui se situent en dehors de la fourchette de prix. Le filtre que vous avez demandé ne met en évidence que tout ce qui dépasse 20. Aussi, deuxième demande :

Je ne peux pas répondre car vous n'avez publié aucun code impliquant d'autres filtres.

Concernant le code publié, il échoue non seulement en termes de syntaxe, mais aussi en termes de finalité.

  1. Les méthodes jQuery ne reconnaissent pas les références JavaScript simples et vice versa. Afin d'utiliser des méthodes JavaScript pures sur un

    objet jQuery, l'objet jQuery doit être déréférencé. Évitez de chaîner les méthodes jQuery et JavaScript. Voici la table des méthodes jQuery et la table des méthodes JavaScript pures utilisées dans la question :

    • Méthodes jQuery

      MéthodeDescription
      .each()
      Itérer sur les objets jQuery et appeler des fonctions pour chaque élément DOM
      .find()
      Collectez tous les éléments DOM spécifiés dans l'objet jQuery en tant que nouvel objet jQuery
      .addClass()
      Ajouter une classe à chaque élément DOM dans un objet jQuery
    • Méthode JavaScript pure

      MéthodeDescription
      .sort()
      Renvoie une nouvelle copie du tableau donné par ordre croissant
      .slice()
      Renvoie la plage d'éléments définis dans le tableau donné en tant que nouveau tableau
    • En bref, lorsqu'elle est donnée par div.mErEH _223RA组成的jQuery对象是通过.each().find()创建的代码>.然后,当在所述 jQuery 对象上调用 .sort() , la fonction échoue car :

      • .sort() est une méthode JavaScript normale et ne reconnaît pas les objets jQuery
      • .sort() gère les tableaux, pas les objets jQuery
    • Cela fonctionnerait si la fonction supprimait complètement jQuery et collectait simplement tout div.mErEH _223RA 作为 NodeList,然后转换为数组,.sort().slice(). Malheureusement, le nouveau tableau renvoyé est constitué des 6 premiers éléments DOM par ordre croissant, ce qui ne vous permet même pas de mettre en évidence tous les éléments DOM au-delà de 20.

    • Dans l'exemple suivant, la mise en page HTML réelle n'a pas d'importance, className ".x" 应替换为 ".mErEH _223RA".

      Exemples annotés avec détails

      /**
       * For each ".x"...
       */
      $(".x").each(function() {
        /**
         * ...get it's text with .textContent.
         * Then exclude the first character ("€") with .substring(1)...
         * ...and convert the text into a real number with Number().
         */
        let price = Number(this.textContent.substring(1));
        /**
         * Next, if the number is greater than 20...
         */
        if (price > 20) {
          /**
           * ...add ".red" className to DOM element. 
           */
          $(this).addClass("red");
        }
      });
      .red {
        color: red
      }
      <main>
        <table>
          <tbody>
            <tr><td class="x">€20</td><td class="x">€100</td><td class="x">€10</td></tr>
            <tr><td class="x">€55</td><td class="x">€2</td><td class="x">€2000</td></tr>
            <tr><td class="x">€8</td><td class="x">€325</td><td class="x">€120</td></tr>
            <tr><td class="x">€70</td><td class="x">€99</td><td class="x">€220</td></tr>
            <tr><td class="x">€19</td><td class="x">€25</td><td class="x">€440</td></tr>
            <tr><td class="x">€111</td><td class="x">€44</td><td class="x">€13</td></tr>
          </tbody>
        </table>
      </main>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!