如何使用 jQuery 切换 CSS？

How do I toggle CSS with jQuery?

提问by marcamillion

I have the following code:

我有以下代码：

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

That is triggered by a click.function().

这是由 click.function() 触发的。

I would like that to be a toggle - so when I click the element, it changes the border to what I have above...but when it is clicked again it disappears or rather sets the border to ' '.

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

Thoughts?

想法？

Edit: I should have been explicit...but I don't want to create a CSS class. The reason being is because when I do that, it messes up the formatting of the element being styled. I am sure that it is some small quirk somewhere that would fix it, but I am not interested in wading through the entire code base to fix little positioning issues with a new class. I would much rather just edit the css attribute directly - because it doesn't interfere with the layout.

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

Edit2: Here is the jsfiddle of the codeI am trying to edit. If you notice, I have the CSS attributes last. But how do I let that be toggled ?

Edit2：这是我试图编辑的代码的jsfiddle。如果你注意到，我最后有 CSS 属性。但是我如何让它被切换？

Edit3: If anyone is interested...the UI that this will be used in is for my webapp - http://www.compversions.com

编辑 3：如果有人感兴趣......这将用于我的 web 应用程序的用户界面 - http://www.compversions.com

回答by Cole

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

Try This

尝试这个

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

回答by lonesomeday

I would do this by defining a withborderclass and toggling that class.

我会通过定义一个withborder类并切换该类来做到这一点。

CSS:

CSS：

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

jQuery:

jQuery：

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

回答by John Hartsock

you could create a CSS class for this

你可以为此创建一个 CSS 类

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

Then in javascript toggle the class using jQuery toggleClass() method

然后在 javascript 中使用jQuery toggleClass() 方法切换类

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

回答by Adam

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