JQuery Ajouter/Supprimer des liens

J'ai une liste de liens que j'utilise pour filtrer les résultats, par ex.JQuery Ajouter/Supprimer des liens

filtre 1, un filtre 2, un filtre 3, le filtre aucun

Lorsqu'un lien de filtre est cliqué mettre à jour le contenu d'un div en utilisant la commande de charge JQuery. Ce que je veux alors arriver, c'est que le lien de filtre sur lequel l'utilisateur a cliqué devienne juste un texte plutôt qu'un lien (ceci empêchera l'utilisateur de cliquer à nouveau sur le lien et lui montrera aussi quel filtre il utilise). Si l'utilisateur clique ensuite sur un autre lien de filtre, je souhaite que le lien précédent soit restauré, puis que le lien sur le filtre sur lequel il a cliqué soit supprimé.

Comment est-ce que je ferais cette utilisation JQuery? J'ai trouvé la commande remove mais je ne pense pas que cela aiderait car je ne serais pas capable de la restaurer lorsque l'utilisateur clique sur un filtre différent.

Merci

Source

2010-02-05 John

Bind et Unbind nécessitent beaucoup de frais généraux par rapport à l'ajout d'une classe, par exemple.

Les solutions bind/unbind fonctionneront, mais ne constituent pas la meilleure solution.

Voici une meilleure solution.

.disabled { 
      text-decoration:none; 
      color: black; 
     } 
<div> 
    <a href="" class="filterLink">link</a><br /> 
    <a href="" class="filterLink">link</a><br /> 
    <a href="" class="filterLink">link</a><br /> 
</div> 

    $('document').ready(function() { 

      $('.filterLink').click(function() { 
       if($(this).hasClass('disabled')) { 
        return false; 
       } 
       $(this).addClass('disabled'); 
       $(this).siblings().removeClass('disabled'); 
       return false; 
      }); 

    });

Source

2010-02-05 16:59:16 user113716

Mettez deux éléments les uns une balise d'ancrage et un autre texte tout à fait normal dans une période d'identifier. Ensuite, utilisez jQuery toggle() sur les deux/tous les filtres pour activer/désactiver ou masquer la balise d'ancrage ou les éléments d'étendue.

Source

2010-02-05 16:06:03

Vous vous constateriez répondre ici Disabling links with JQuery

Merci @Will pour cette solution élégante.

jQuery('#path .to .your a').each(function(){ 
    var $t = jQuery(this); 
    $t.after($t.text()); 
    $t.remove(); 
});

Source

2010-02-05 16:07:56 Matt

Mais comment voulez-vous alors inverser cette opération et de restaurer le lien quand un autre lien est cliqué? L'objectif est de faire basculer les liens vers et à partir du texte, pas de les convertir à sens unique. –

J'utiliserais '.html()' au lieu de '.text()' pour conserver les éléments à l'intérieur de la balise ''. – gphilip

Jquery:

$(function(){ 
    $("a:first").bind("click",function(){ 
     $("div").append("<span>Link</span>"); 
     $(this).remove(); 
    }); 
     $("a:last").bind("click",function(){ 
    $(this).prev().find("span").wrap("<a href=#>"); 
    }); 
});

HTML:

<body> 
<div><a href="#">Link</a></div> 
<a href="#">Link2</a> 
</body>

Source

2010-02-05 16:08:38 ozsenegal

est ici l'ancre:

<a id="myLink" href="myPage.html" onclick="return true" />

Appelez la fonction désactiver

disableLink('#myLink');

Appelez la fonction activer

enableLink('#myLink');

Lorsque vous souhaitez désactiver le lien, juste avoir revenir onclick faux

function disableLink(selector){ 
    $(selector).attr('onclick', 'return false'); // disable link 
    $(selector).css('text-decoration', 'none'); // remove underline 
}

Lorsque vous voulez activer

function enableLink(selector){ 
    $(selector).attr('onclick', 'return true'); // enable link 
    $(selector).css('text-decoration', 'underline'); // add underline 
}

Source

2010-02-05 16:08:54 Gabe

Je ne pense pas que le but de la question était d'empêcher le clic sur le lien, c'était de montrer à l'utilisateur le lien sur lequel il se trouve en tournant le lien en texte brut. (Et puis revenir sur ce changement si un autre lien est cliqué et devient "actif") –

@Seth Petry-Johnson, Eh bien, cela ne supprime pas le lien, mais il fait ressembler à du texte et empêche également de cliquer dessus à nouveau. Donc, le problème est résolu avec moins de tracas. – Gabe

D'accord, je pense que votre réponse mise à jour répond mieux à la question. Je pense toujours qu'il serait plus propre d'ajouter/supprimer une classe CSS "active-link" que de définir explicitement la propriété "text-decoration" via JS. Je préfère faire mon style dans un fichier .css qu'en modifiant les appels jquery :) –

-2

plutôt que de transformer le lien "actif" en texte, une solution plus simple serait d'utiliser CSS pour indiquer quel lien est un ctive. Par exemple, vous pouvez définir un style appelé "actif".Chaque fois que vous cliquez sur un lien, vous devez:

Supprimer la classe "active" de tout autre lien qui en contient;
Ajouter la classe « active » du lien qui vient d'être cliqué

Si vous voulez vraiment convertir un lien vers le texte, vous pouvez créer une structure HTML comme ceci:

<div class="link-wrapper"> 
    <div class="link"><a href="">...</a></div> 
    <div class="text" style="display: none">Text-version of the link</div> 
</div>

Ensuite, , chaque fois qu'un lien est que vous avez cliqué:

Utilisez la méthode .parent() pour obtenir une référence au « lien-wrapper » div
Appelez .hide() sur le "link" div
Appelez .show() sur le "text" div
Inversez les étapes 2 et 3 pour celle qui est actuellement active.

Source

2010-02-05 16:10:21

Maintenant, vous devez maintenir le double des liens de contenu – Gabe

C'est pourquoi je recommande la première partie de ma réponse, qui est "utiliser CSS pour refléter quel lien c'est actif'". Mais la question posée explicitement sur le remplacement d'un lien avec du texte et un moyen de revenir plus tard, et le balisage que j'ai posté est une façon de le faire sans perdre aucune information sur le lien (comme leur URL cible).Les autres solutions ici sont excellentes pour supprimer le lien et mettre le texte, mais elles n'abordent pas comment inverser cette opération quand on clique sur le lien suivant. –

Ma solution ne supprime rien. Il rend le lien non cliquable et le fait visuellement ressembler à du texte. De plus, ma solution ne fait pas plus de travail pour moi-même alors que la vôtre devrait maintenir le double du contenu. Par exemple, si un texte de lien a changé, vous devrez le changer en deux endroits au lieu d'un. – Gabe

Qu'est-ce que vous pourriez faire pour rendre ce la façon la plus facile et propre possible est de définir deux classes CSS, ActiveFilter et inactivefilter, le premier font ressembler à un lien et sur la seconde faire paraître inactif et votre HTML/jQuery serait quelque chose comme:

<a href="#" class="filter">Filter 1</a> 
<a href="#" class="filter">Filter 2</a> 
<a href="#" class="filter">Filter 3</a> 
<a href="#" class="filter">Filter None</a> 

var doStuff = function() { 
    alert('stuff'); 
}; 
$(function() { 
    $('a.filter').bind('click', function() { 
    $('a.filter').removeClass('activefilter').unbind('click.stuff'); 
    $(this).addClass('activefilter').bind('click.stuff',doStuff);     
    return false; 
    }); 
});

Source

2010-02-05 16:16:12

c'est la seule bonne solution ici, sauf que vous n'avez pas besoin de deux classes. ignorer la classe inactivefilter et ça marchera toujours :) – naugtur

Oui, vous avez raison :) –

Non, parce que, pour ce que j'ai compris, quand vous commencez, aucun des filtres n'est appliqué, donc aucun n'est actif, tous sont cliquables. À propos de votre autre question, vous pourriez facilement ajouter un événement clickpaced, que vous pourriez lier et délier aux filtres actifs et inactifs, mais comme ce n'était pas clair et que le principal problème semblait être les liens, je n'ai produit aucun code pour cela, mais je peux le faire –

Je sais que c'est un peu en retard, mais une chose que je vois un problème avec l'aide d'un tag est que si vous enlevez le curseur de pointeur, vous obtiendrez toujours le pointeur. Même si vous supprimez la liaison pour cliquer. Donc, une chose qui devrait aussi être fait est:

curseur: texte

Source

2011-10-28 14:46:54

JQuery Ajouter/Supprimer des liens

Répondre

Questions connexes