Question

我知道我删除了这个：/我正在努力使我的标题标记更改为onclick。 addClass / removeClass更有效/更好吗？

HTML：

<div class="center">
    <div class="arrow"></div>
    <h1>This is my Header!</h1>
</div>

脚本：

$(".arrow").click(function() {

    //Change Style: If Default to Red
    if ($("h1").css({"color":"default"});){

        $("h1").css({"color":"red"});
        });
    } else {}

    //Change Style: If Red to Blue
    if ($("h1").css({"color":"red"});){

        $("h1").css({"color":"blue"});
        });
    } else {}     

    //Change Style: If Blue to Default
    if ($("h1").css({"color":"blue"});){

        $("h1").css({"color":"default"});
        });
    } else {}

    //May add more colors
});

Answer 1

这不是你如何获得jquery中元素的css属性，它不会返回颜色的名称，而是返回rgb中的值。

它应该是这样的：

if( $('h1').css('color')==='rgb(255, 0, 0)'){
    $("h1").css({"color":"blue"});
}

我认为这是阻止代码按预期工作的唯一部分。加上default颜色，可能只是一个空字符串{"color":""}

Answer 2

关于引用addClass / removeClass的可能性：

$(".arrow").click(function() {


    var $h1 = $('h1');
    if($h1.hasClass('red')){
        $h1.removeClass('red').addClass('blue');
    }else if($h1.hasClass('blue')){
        $h1.removeClass('blue');
    }else{
        $h1.addClass('red');
    }

});

<强> Demo

您的方法的示例如下所示：

$(".arrow").click(function () {

    var $h1 = $("h1");
    var color = $("h1").css("color");
    switch(color){
        case 'rgb(255, 0, 0)':
             $h1.css({"color":"blue"});
            break;
         case 'rgb(0, 0, 255)':
             $h1.css({"color":"black"});
            break;
        default:
            $h1.css({"color":"red"});
            break;
    }

});

我建议缓存你的元素，因为你在这里多次使用相同的elemtn。

<强> Demo

Answer 3

使用rgb()提供颜色，并使用带有回调功能的css()方法

＆＃13;

$(".arrow").click(function() {
  $("h1").css("color", function(i, v) {
    if (v == "rgb(0, 0, 0)")
      return "rgb(255, 0, 0)";
    if (v == "rgb(255, 0, 0)")
      return "rgb(0, 0, 255)";
    if (v == "rgb(0, 0, 255)")
      return "rgb(0, 0, 0)";
  });
});

＆＃13;

.center {
  margin: 1% 0;
  text-align: center;
}
.arrow {
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  cursor: pointer;
  display: inline-block;
  height: 0;
  margin: 0;
  width: 0;
  border-top: 10px solid #aaa;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="center">
  <div class="arrow"></div>
  <h1>This is my Header!</h1>
</div>

＆＃13;

Answer 4

您的代码中有一些内容阻止它工作。

if(...) else {}
if(...) else {}
if(...) else {}

首先，如果它是空的，你不需要别的。第二，如果你这样写，你的条件会一个接一个地检查，这意味着你的颜色会改变三次，直到它具有之前的颜色。最好写if(...){} else if(...){} else if(...){}

if(...;)

不要使用＆＃34;;＆＃34;在一个条件。

if(...) {... }); }

什么是＆＃34;}）;＆＃34;在那里？

最后你只能用

检查一下css属性

$("h1").css("color") == ...

但由于它需要一个rgb值，我不推荐这种方法，而是使用类。

您的代码看起来像

$(".arrow").click(function() { if($("h1").hasClass("red")) { $("h1").removeClass("red"); $("h1").addClass("green"); } else if($("h1").hasClass("green")) { $("h1").removeClass("green"); $("h1").addClass("blue"); } else if($("h1").hasClass("blue")) { $("h1").removeClass("blue"); $("h1").addClass("red"); } });

有关工作示例，请参阅JSFiddle。

Answer 5

您可以尝试以下替代方法：

$('h1').click(function () {
  $('h1').addClass('red');
});

单击更改H1样式（Javascript / Jquery）

5 个答案: