¿Cómo cambio CSS con jQuery?

Question

Tengo el siguiente código:

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

que se desencadena por un click.function().

Me gustaría que fuera un conmutador, por lo que cuando hago clic en el elemento, cambia el borde a lo que tengo arriba ... pero cuando vuelve a hacer clic desaparece o más bien establece el borde en ''.

¿Pensamientos?

Editar: Debería haber sido explícito ... pero no quiero crear una clase de CSS. La razón es porque cuando hago eso, daña el formato del elemento que se está creando. Estoy seguro de que es una pequeña peculiaridad en algún lugar que lo solucionaría, pero no estoy interesado en recorrer la base de códigos completa para solucionar pequeños problemas de posicionamiento con una nueva clase. Prefiero simplemente editar el atributo css directamente, porque no interfiere con el diseño.

Edit2: Aquí está el jsfiddle of the code que estoy tratando de editar. Si lo notas, tengo los atributos de CSS al final. ¿Pero cómo dejo que eso se alterne?

Edit3: Si alguien está interesado ... la interfaz de usuario que se usará en la aplicación de web es para mi - http://www.compversions.com

Answer 1

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

Trate Esta

$(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'}); 
}); 
    }); 

Answer 2

Use toggle.

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

Answer 3

Haría esto definiendo una clase withborder y togglin g esa clase.

CSS:

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

jQuery:

$('#bc' + $.trim($this) + ' span.dashed-circle').click(function(){ 
    $(this).toggleClass('withborder'); 
}); 

Answer 4

se podría crear una clase CSS para este

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

A continuación, en javascript alternar la clase utilizando jQuery toggleClass() method

$('.yourSelector').toggleClass("specialborderClass");