Comment puis-je basculer CSS avec jQuery?

J'ai le code suivant:

$('#bc' + $.trim($this) + ' span.dashed-circle').css({ 'border' : '5px solid #000'});

Qui est déclenché par un clic.la fonction().

Je voudrais qu'être une bascule alors, quand je clique sur l'élément, ça change de la frontière de ce que j'ai ci-dessus...mais quand il est cliqué de nouveau il disparaît ou plutôt des ensembles de la frontière'.

Pensées?

Edit: je devrais avoir été explicite...mais je ne veux pas créer une classe CSS. La raison en est, car quand je fais ça, ça bousille la mise en forme de l'élément de style. Je suis sûr que c'est un petit caprice de quelque part qui permettrait de régler le problème, mais je ne suis pas intéressé à patauger dans l'ensemble de la base de code pour fixer peu des questions de positionnement avec une nouvelle classe. Je préférerais de beaucoup il suffit de modifier l'attribut css directement, car il n'interfère pas avec la mise en page.

Edit2: Voici le jsfiddle du code je suis en train de modifier. Si vous remarquez, j'ai les attributs CSS dernier. Mais comment faire pour qu'elle soit activée ?

Edit3: Si quelqu'un est intéressé...l'INTERFACE utilisateur qui sera utilisé dans est pour ma webapp - http://www.compversions.com

regarder jquery bascule: api.jquery.com/toggle
C'était la première chose que j'ai fait, mais en raison de la façon dont mon code est il me donnait des problèmes. C'est pourquoi je suis venu ici.

OriginalL'auteur marcamillion | 2010-12-22

  1. 16
    $("trigger-element").toggle( function() {
   $(element-to-change).css({ 'border' : '5px solid #000'});
   }, function () {
   $(element-to-change).css({ 'border' : 'none'});
});

    Essayer Cette

        $(document).ready(function() {
        $('#panels tr table tr').toggle(function () {
            var $this = $(this),
                tr_class = 'dash-elem-selected';
            if (!$this.parent('thead').length) {
                if ($this.hasClass(tr_class)) {
                    $this.removeClass(tr_class);
                    tr_class = 'removeClass';
                } else {
                    $this.addClass(tr_class).siblings().removeClass(tr_class);
                    tr_class = 'addClass';
                }
                $this = $this.parents('td table').siblings('.sit-in-the-corner').text();
                $('#bc' + $.trim($this) + ' span')[tr_class]('bc-dotted-to-solid');
                $('#bc' + $.trim($this) + ' span.dashed-circle').css({ 'border' : '5px solid #000'});
            }
        }, function() {
   //This is your new function that will turn off your border and do any other proccessing that you might need.
$('#bc' + $.trim($this) + ' span.dashed-circle').css({ 'border' : 'none'});
});
    });
    Je pense que c'est le plus proche de ce que je veux faire.
    Cependant, je ne suis pas tout à fait sûr de savoir comment l'appliquer à mon code: jsfiddle.net/BMWZd/4 les Pensées?
    Essayez mon montage ci-dessus.
    J'ai essayé et c'est ce que je suis...à l'aide de votre code exactement comme vous l'avez collé: jsfiddle.net/BMWZd/7 La question est, qu'une fois que vous cliquez sur l'un des éléments dans la boîte, il reste noir lorsque vous essayez de l'enlever. Donc l'autre fonction dans la bascule ne semble pas être le travail (c'est à dire 'frontière' : 'none').
    J'ai voté pour celui-ci de lonesomeday

    OriginalL'auteur Cole

  2. 15

    Je voudrais faire cela par la définition d'un withborder classe et le basculement de la classe.

    CSS:

    .withborder {
    border: 5px solid #000;
}

    jQuery:

    $('#bc' + $.trim($this) + ' span.dashed-circle').click(function(){
    $(this).toggleClass('withborder');
});
    je suis d'accord avec votre analyse sauf pour une chose. L'OP n'a pas dit que l'événement click est sur $('#bc' + $.trim($this) + ' span.dashed-circle')
    Hartsock, j'ai lu "quand je clique sur l'élément" comme faisant référence à l'élément mentionné dans le sélecteur.
    Votre hypothèse peut être correct, mais je voulais juste le signaler.
    Merci pour cette réponse, mais je n'ai pas été assez précis. Je ne veux pas d'une nouvelle classe. J'ai mis à jour la question d'ajouter plus de spécificité.
    Comme vous voulez, mais il n'y a pas de différence fonctionnelle entre le faire en ligne avec css et avec une classe.

    OriginalL'auteur lonesomeday

  3. 12

    vous pouvez créer une classe CSS pour cette

    .specialborderclass {
  border: 5px solid #000;
}

    Ensuite en javascript basculer la classe à l'aide de jQuery toggleClass() la méthode

    $('.yourSelector').toggleClass("specialborderClass");
    pas de . dans le nom de la classe lorsque vous appelez toggleClass(".specialvorderClass")
    je vous remercie.
    Merci pour ce Jean, mais je ne veux pas d'une autre classe. Je veux simplement modifier le css. J'ai mis à jour la question pour en tenir compte.
    J'adore cette technique, en particulier parce que le code est concis et sépare votre CSS, de JavaScript. Bravo!

    OriginalL'auteur John Hartsock

  4. 4

    L'utilisation de la bascule. 

    $("#IDOfElementYouClickOn").toggle(
      function(){$('#bc' + $.trim($this) + ' span.dashed-circle').css({ 'border' : '5px solid #000'});},
      function(){$('#bc' + $.trim($this) + ' span.dashed-circle').css({ 'border' : ''});}
    );
    Adam, j'aime ce que vous avez fait ici....mais je ne suis pas tout à fait sûr de savoir comment l'appliquer à mon code. Voir jsfiddle.net/BMWZd/4 pour ce que je suis en train de travailler avec. J'ai également mis à jour de nouveau la question.

    OriginalL'auteur Adam