Attribut de déclenchement de données Twipsy et bizarrerie de JQuery

Question

Je n'arrive pas à faire en sorte que Twipsy lise les attributs de données définis sur les éléments activés par Twipsy.

J'ai un <input...> avec les attributs suivants :

rel="twipsy"
data-trigger="focus"

Les <head...> contient le JS script suivant :

$(document).ready(function () {
    $(function () {
        $('[rel=twipsy]').twipsy({ live: true });
    });
});

Lorsqu'il est exécuté, Twipsy est déclenché par la fonction centre de souris y quitter la souris événements, et non se focaliser y flou , en tant que la documentation suggère.

J'ai donc changé le JS script de ma page en :

$(document).ready(function () {
    $(function () {
        $('[rel=twipsy]').twipsy({ live: true, trigger: ($(this).attr('data-trigger') == 'focus' ? 'focus' : 'hover') });
    });
});

Même résultat. Bien que j'utilise Prototype depuis longtemps, je n'ai commencé à jouer avec JQuery que depuis une semaine, il est donc tout à fait possible (OK - très probable) que je ne comprenne tout simplement pas comment JQuery gère les collections, l'énumération et l'énumération. cette .

$(document).ready(function () {
    $(function () {
        $('[rel=twipsy]').each(function () {
            var trigger = $(this).attr('data-trigger')
            $(this).twipsy({ live: true, trigger: (trigger == 'focus' ? 'focus' : 'hover') })
        });
    });
});

Et cela fonctionne comme prévu.

Ma question est donc la suivante : Qu'est-ce que j'ai fait de mal dans les deux premiers exemples ? Pourquoi l'attribut data-trigger de l'élément n'a-t-il pas été reconnu et qu'est-ce qui n'allait pas avec le JS script dans le deuxième exemple ?

Answer 1

Dans le second cas :

$(document).ready(function () {
    $(function () {
        $('[rel=twipsy]').twipsy({ live: true, trigger: ($(this).attr('data-trigger') == 'focus' ? 'focus' : 'hover') });
    });
});

Vous avez utilisé $(this) à l'intérieur d'une fonction anonyme, il pointe vers la fonction document objet. Vous avez résolu le problème en plaçant le "travail" à l'intérieur d'un objet .each() où jQuery a eu la gentillesse de définir le contexte de this à ce que vous attendiez, votre objectif. jsFiddle

Votre solution finale est pratiquement optimisée. Vous demandez qu'une action différente soit entreprise pour chaque élément de l'ensemble apparié en fonction d'une certaine logique relative à ses propriétés, vous allez donc devoir itérer sur chacun d'entre eux d'une manière ou d'une autre :

$(document).ready(function () {
        $('[rel=twipsy]').each(function () {
            var trigger = $(this).attr('data-trigger') === 'focus' ? 'focus' : 'hover')
            $(this).twipsy({ live: true, trigger: trigger })
        });
});

• Utilisez TOUJOURS le triple = pour vérifier l'égalité stricte.
• Les La fonction anonyme auto-exécutoire était redondante
• Personnellement, si je suis ternaire pour un cas de commutation, je le ferais lors de l'enregistrement de la variable.

Answer 2

Twipsy est bizarre, je vous l'accorde mais sans même approfondir la question, il y a une chose que je dois souligner, pour votre bien, et pour tous ceux qui tomberont sur ce message

$(document).ready(function () {

et

$(function () {

SONT LA MÊME CHOSE ! Avec

jQuery(function () { y jQuery(document).ready(function () { et tous leurs amis bizarres Mais, "c'est" déjà assez grave une fois ne le faites pas. le tuer deux fois, lol. Je suis sûr que cela ne peut pas vous aider Javascript est extrêmement anal. La moindre petite erreur ne fera fonctionner RIEN. En cas de doute, revenez en arrière et regardez TOUT pour trouver des erreurs stupides (et pas si stupides que ça).