Question

我有以下代码：

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

由click.function（）触发。

我希望这是一个切换 - 所以当我单击该元素时，它会将边框更改为我上面的内容...但是当它再次被单击时它会消失或者将边框设置为''。

思想？

编辑：我应该是明确的......但我不想创建一个CSS类。原因是因为当我这样做时，它会弄乱被设计元素的格式。我确信这是一个可以修复它的小怪癖，但是我对整个代码库的修复并不感兴趣，以解决新类的小定位问题。我宁愿直接编辑css属性 - 因为它不会干扰布局。

Edit2：这是我要编辑的jsfiddle of the code。如果你注意到，我最后有CSS属性。但我如何让它被切换？

编辑3：如果有人有兴趣...将使用的用户界面是我的网络应用程序 - 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'});
});

试试这个

    $(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

我会通过定义withborder类并切换该类来实现此目的。

CSS：

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

jQuery的：

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

Answer 3

你可以为这个

创建一个CSS类

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

然后在javascript中使用jQuery toggleClass() method

切换课程

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

Answer 4

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

如何使用jQuery切换CSS？

4 个答案: