7
votes

Utilisation de jQuery pour ajouter un lien à un élément si une condition est remplie

Je suis très nouveau à HTML, CSS et JavaScript. J'essaie d'utiliser jQuery pour faire un bouton actif ou inactif en fonction de l'heure de la journée. J'ai réussi à obtenir l'image pour changer correctement après la définition du temps ( d ), un ouvrir heure et un fermer heure. Cependant, j'ai des problèmes d'attribution d'un lien vers les boutons en fonction de l'heure de la journée.

Ce code applique correctement une classe si le temps est compris entre Ouvrir et Fermer . Il applique également correctement le lien vers le Boutonone DIV, uniquement lorsque la classe ManagsChatButtonActive est appliquée, dans un jsfiddle. Toutefois, dans SharePoint, ceci sera-t-il, le lien est également appliqué même lorsque l'état de l'heure n'est pas rempli.

Comment puis-je obtenir le lien uniquement appliqué lorsque la condition "si" est remplie? < / P>

(c'est ma première fois sur le débordement de la pile, alors excuses si cela n'est pas très bien aménagé ou expliqué). xxx


13 commentaires

Nous aurions besoin de voir quelles valeurs de d , ouvrir close doivent pouvoir vous aider efficacement.


Salut Rory, j'ai ajouté les autres parties.


Salut Paul, désolé raté ça. Je l'ai ajouté maintenant. Il suffit de me mettre en forme de la tête sur ce site!


Je suppose que la mise à jour d> = ouvrir && d to + d> = + ouvrir et& + d <+ ferme devrait faire le tour.


Salut Hawkeye, je pensais avoir fermé la balise une étiquette correctement comme une étiquette de fermeture automatique. Ai-je fait ce faux?


Je commence à penser qu'il n'y a rien de fondamentalement mal avec le script (autre que peut-être un peu maladroit), mais c'est plutôt un problème SharePoint? Le script complet ainsi que le CSS et le HTML sont mis dans une partie Web de l'éditeur de contenu.


Si vous seriez utile de savoir comment le script est ajouté à la page SharePoint et si la page utilise une page principale. Aussi, voir: SharePoint Stack Exchange est un site de questions et de réponses pour les amateurs de SharePoint.


Désolé Andy! Je n'ai pas vu que tu avais la fermeture automatique!


Bonjour Roberto, la page utilise une page principale et j'ajoute au moment où j'ajoute tout le script (CSS, JavaScript, JQuery et HTML) dans une partie Web d'éditeur de contenu unique. Une fois que j'ai travaillé, j'ai alors tendance à les casser dans des fichiers distincts référencés d'une bibliothèque de documents. Il est tout simplement plus facile de copier et coller de NotePad ++ directement dans une partie Web de l'éditeur de contenu.


... De plus, je serai sûr de regarder dans le site SharePoint Stack Exchange. Je pense que le "vrai" problème et solution est avec SharePoint.


Impossible de faire dupliquer le problème lorsqu'il est exécuté dans un CEWP SharePoint avec code chargé via URL de contenu. Le problème probablement probablement probablement en essayant d'exécuter le code en le collant directement dans la CSEWP, c'est-à-dire que SharePoint filtrera et cadrera le code. Il existe plusieurs autres problèmes de conception, mais ceux-ci vont au-delà de la portée de la question.


Bonjour Roberto, oui c'était le problème. Dès que je divise le code en trois fichiers distincts, référençant le CSS et JS dans le fichier HTML et référencez ce fichier HTML dans le CEWP, tout fonctionnait correctement.


Merci à tous ceux qui ont contribué. Il semble qu'il n'y avait pas vraiment de problème avec le code (autre que d'être rugueux, mais je ne sais pas, mais plutôt le problème de SharePoint CEWP. Au moins je sais que je suis sur la bonne voie. Ensuite, j'ai besoin de reconsidérer comment je reçois l'heure actuelle (basée sur vos différentes suggestions), car les fuseaux horaires doivent entrer dans la logique suivant!


3 Réponses :


2
votes

Assurez-vous d'envelopper votre méthode dans la syntaxe de JQuery pour le document sur le document prêt ou sur le chargement comme suit: xxx

https://jsfiddle.net/aaronfranco/3xwhoh10/1/

Il pourrait également avoir plus de sens à utiliser Gettime () pour utiliser un Unix horodatage, qui est un nombre, au lieu d'une chaîne de date. xxx


3 commentaires

Bonjour Aaron, j'ai eu un $ (document) .Ready (fonction (fonction (fonction () {et approprié dans mon fichier, je n'étais pas sûr de combien ou à quel point je devrais ajouter à mon exemple. J'ai ajouté ces lignes à mon exemple. Il fonctionne correctement dans Jsfiddle correctement. Mais lorsque le texte intégral (avec le CSS et HTML) est ajouté dans une partie Web de l'éditeur de contenu, le lien est présent tout le temps.


Vous devrez poster un Jsfiddle qui reproduit le problème ou ajouter plus de code avec HTML et CSS pour nous montrer plus clairement.


JQuery Document prêt ne fonctionne pas toujours comme prévu dans l'environnement SharePoint. Voir: SharePoint 2013 Ajouter JavaScript après la charge de la page entière



2
votes

N'oubliez pas d'obtenir le temps fort> actuel fort> avec la méthode Gethours ou GetTime. Vous voulez que cela comparait à votre condition. Ces valeurs ne doivent pas nécessairement être dans un format temporel, il est également possible de simplement utiliser certains numéros statiques.

Vous pouvez simplement faire quelque chose comme ceci: P>

var time = new Date(),
hours = time.getHours();

if (hours >= 9 && hours < 18) {
  $(".ButtonOne").addClass("ManagersChatButtonActive");
  $(".ButtonOne").wrap('<a href="http://www.google.com"/>');
} else {
  $(".ButtonOne").addClass("ManagersChatButtonInactive");
}


1 commentaires

up voté. Bien que cela ne résout pas le problème, il s'agit d'une amélioration remarquable du code d'origine.



1
votes

J'ai vérifié votre code dans le navigateur avec jQuery, mais je ne connais pas SharePoint, alors je suppose que si vous entonnez simplement votre code qui fonctionne bien avec JQuery, dans .ready () de sorte que lorsque le document soit prêt que votre Le code est exécuté et lorsque l'élément "Buttonone" est initialisé dans DOM:

p>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="ButtonOne" >
This is the desired ButtonOne Div
</div>


3 commentaires

@Andy Vous pouvez inspecter l'élément pour la console de classe ou ouvrir la console de navigateur et voir la console.log et la console.info Sortie pour une meilleure compréhension.


Bonjour Shivgre, merci pour votre contribution. Je reçois le même résultat cependant. Le lien reste actif même lorsque la classe «inactive» est appliquée. Mais seulement dans SharePoint.


@Andygill Pouvez-vous partager votre classe CSS de classe inactive?