0

我正在尝试编写一个可以切换 div 的 CSS 属性的代码。基本上我正在尝试创建一个具有正常状态和活动状态的按钮。

它的正常颜色是蓝色，但是一旦单击它，它就会变成绿色。再次单击它，它会变回蓝色。

CSS：

    .lblue{
        -moz-border-radius: 3px;
        border-radius: 3px;
        box-shadow: 0 1px 2px #fff, /*bottom external highlight*/
          0 -1px 1px #666, /*top external shadow*/ 
          inset 0 -1px 1px rgba(0,0,0,0.5), /*bottom internal shadow*/ 
          inset 0 1px 1px rgba(255,255,255,0.8); /*top internal highlight*/
        font-size: 16pt;
        padding: 5px;
        margin: 5px;
        color: white;
        background: #4bc2d3; /* Old browsers */
        background: -moz-linear-gradient(top,  #4bc2d3 0%, #70d6e2 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4bc2d3), color-stop(100%,#70d6e2)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  #4bc2d3 0%,#70d6e2 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  #4bc2d3 0%,#70d6e2 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  #4bc2d3 0%,#70d6e2 100%); /* IE10+ */
        background: linear-gradient(to bottom,  #4bc2d3 0%,#70d6e2 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4bc2d3', endColorstr='#70d6e2',GradientType=0 ); /* IE6-9 */
        font-family: OpenSans-Semibold;
        float: left;
        }


        .lgreen{
            -moz-border-radius: 3px;
            border-radius: 3px;
            box-shadow: 0 1px 2px #fff, /*bottom external highlight*/
              0 -1px 1px #666, /*top external shadow*/ 
              inset 0 -1px 1px rgba(0,0,0,0.5), /*bottom internal shadow*/ 
              inset 0 1px 1px rgba(255,255,255,0.8); /*top internal highlight*/
            font-size: 16pt;
            padding: 5px;
            margin: 5px;
            color: white;
            background: #7ebb44; /* Old browsers */
            background: -moz-linear-gradient(top,  #7ebb44 0%, #a5d063 100%); /* FF3.6+ */
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7ebb44), color-stop(100%,#a5d063)); /* Chrome,Safari4+ */
            background: -webkit-linear-gradient(top,  #7ebb44 0%,#a5d063 100%); /* Chrome10+,Safari5.1+ */
            background: -o-linear-gradient(top,  #7ebb44 0%,#a5d063 100%); /* Opera 11.10+ */
            background: -ms-linear-gradient(top,  #7ebb44 0%,#a5d063 100%); /* IE10+ */
            background: linear-gradient(to bottom,  #7ebb44 0%,#a5d063 100%); /* W3C */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7ebb44', endColorstr='#a5d063',GradientType=0 ); /* IE6-9 */
            font-family: OpenSans-Semibold;
            float: left;
            }

HTML：

 <div class="lblue">Soul</div>

JS：

        $('.lblue').click(function() {
          $('.lblue').toggle(function() {
            $('.lblue').addClass('lgreen');

          });
        });

我的代码的问题是，由于某种原因，当我单击按钮时，按钮就像滑出一样消失了。

4

5 回答 5

2

http://api.jquery.com/toggle/

Toggle 方法在每次调用时显示/隐藏元素。

$('.lblue').click(function() {
    $(this).toggleClass('lgreen');
});
于 2012-12-16T12:01:07.700 回答
2

我不能同意其余的答案。尽管它们是正确的，但它们在语义上似乎并不正确，但元素的类将同时包含lblue和lgreen类名：

<div class="lblue lgreen">Soul</div>
            ^^^^^^^^^^^^-- this is bad

它们将按照您的 CSS 中定义的类名的顺序来依赖。

避免将来出现问题，并对所见和 DOM 中的内容使用语义正确：

$(document).on("click", ".lblue, .lgreen", function(){
  $(this).toggleClass("lblue lgreen");
});​

如果所有元素的初始状态都是蓝色的，那么：

$(".lblue").click(function(){
  $(this).toggleClass("lblue lgreen");
});​

前者适用于动态添加的元素，后者不会。

看看这个。

于 2012-12-16T12:19:15.427 回答
0

你用.toggle()错了。

$('.lblue').click(function() {
    $(this).toggleClass('lgreen');
});
于 2012-12-16T12:03:59.897 回答
0

使用纯 JavaScript，您可以使用 classList 切换 https://developer.mozilla.org/en-US/docs/DOM/element.classList

// div is an object reference to a <div> element with class="foo bar"
div.classList.remove("foo");
div.classList.add("anotherclass");
// if visible is set remove it, otherwise add it
div.classList.toggle("visible");
alert(div.classList.contains("foo"));

在您的情况下：（假设只修改一个元素；另请参阅 querySelectorAll 和 getElementsByClassName）

document.querySelector('.lblue').classList.toggle('lgreen');

由于它是相当新的功能，请参阅：http ://caniuse.com/classlist以了解浏览器兼容性

于 2012-12-16T12:04:27.247 回答
0

我想您可以检查颜色并执行事件。

例如。）

与您的情况一样：初始颜色=蓝色。变换颜色 = 绿色

$('button handler').click(function () {
  if($(this).css('background-color') == 'BLUE') { 
    $(this).css('background-color', 'GREEN'); 
  } else { 
    $(this).css('background-color', 'BLUE'); 
  }
});

只是我的猜测。我真的不知道你到底在寻找什么。

于 2012-12-16T13:15:18.530 回答