如何使用jQuery切换CSS？

Question

如何使用jQuery切换CSS？

10

我有以下代码：

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

这是由点击触发的 function()。

我希望它成为一个开关 - 所以当我点击该元素时，它会将边框更改为上面所述...但是当再次单击它时，它会消失或者说将边框设置为''。

有什么想法吗？

编辑：我应该明确一点...但我不想创建CSS类。原因是当我那样做时，它会破坏被样式化的元素的格式。我相信这是某个小怪癖，可以通过修复整个代码库中的一些定位问题来解决，但我不想深入了解。我更愿意直接编辑css属性 - 因为它不会干扰布局。

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

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

- marcamillion

看一下jQuery的toggle：http://api.jquery.com/toggle/ - Cliff

那是我做的第一件事，但由于我的代码方式，它给我带来了问题。这就是为什么我来到这里的原因。 - marcamillion

4个回答

15

我会通过定义一个名为withborder的类，并切换该类来实现。CSS:

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

jQuery：

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

- lonesomeday

1

@lonesomeday。我同意你的分析，除了一点。OP没有说点击事件是在$('#bc' + $.trim($this) + ' span.dashed-circle')上。 - John Hartsock

1

@John Hartsock，我理解“当我点击元素”是指选择器中所引用的元素。 - lonesomeday

1

@lonesomeday 你的假设可能是正确的，但我只是想指出一下。 - John Hartsock

谢谢您的回答，但我没有说明得够清楚。我不想要一个新类。我已经更新了问题以增加更多的具体性。 - marcamillion

@marcamillion 随你喜欢，但是在使用 css 和类进行内联处理之间没有功能上的区别。 - lonesomeday

@lonesomeday 我知道理论上是这样说的......但实际上，我有一些奇怪的布局 - 需要特定位置的其他元素和一些东西。因此，交换类会造成混乱 - 我想这就是简短的答案。 - marcamillion

12

你可以为此创建一个CSS类

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

然后在JavaScript中使用jQuery toggleClass()方法来切换类。

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

- John Hartsock

1

当您调用 toggleClass(".specialvorderClass") 时，请勿在类名中使用 .。 - hunter

谢谢John，但我不想要另一个类。我只想简单地编辑CSS。我已经更新了问题以反映这一点。 - marcamillion

1

我喜欢这种技术，特别是因为代码简洁，将CSS与JavaScript分离。赞！ - hyde

4

使用切换。

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

- Adam

Adam，我喜欢你在这里做的事情...但我不太确定如何应用到我的代码中。请查看http://jsfiddle.net/BMWZd/4/，了解我正在处理的内容。我还更新了问题。 - marcamillion

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Cole · Accepted Answer

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