我的目标是提醒用户，他们点击的任何形状都会与相应的消息对应。
我目前的问题是我使用if语句，如果用户点击背景颜色为蓝色的内容，它会提醒他们说他们点击了一个圆圈。否则他们点击了一个正方形。
结果是点击蓝色圆圈会提示我们点击了一个正方形。
$("div").click(function() {
if ($(this).css("background-color") == "blue") {
alert("This is a circle!");
} else {
alert("This is a square!");
}
});#circle {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: blue;
margin: 10px;
}
.square {
width: 100px;
height: 100px;
background-color: green;
margin: 10px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="circle"></div>
<div class="square"></div>
<div class="square"></div>
答案 0 :(得分：1)
.css（）返回背景颜色的RGB值。
$("div").click(function() {
if ($(this).css("background-color") == "rgb(0, 0, 255)") {
alert("This is a circle!");
} else {
alert("This is a square!");
}
});#circle {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: blue;
margin: 10px;
}
.square {
width: 100px;
height: 100px;
background-color: green;
margin: 10px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="circle"></div>
<div class="square"></div>
<div class="square"></div>
答案 1 :(得分：1)
你得到的反应是rgb值，而不是实际的英文单词。
$("div").click(function() {
if ($(this).css("background-color") == "rgb(0, 0, 255)") {
alert("This is a circle!");
} else {
alert("This is a square!");
}
});#circle {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: blue;
margin: 10px;
}
.square {
width: 100px;
height: 100px;
background-color: green;
margin: 10px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="circle"></div>
<div class="square"></div>
<div class="square"></div>
答案 2 :(得分：0)
为了使其更具可扩展性，您可以使用类名作为警报的内容：
$("div").click(function() {
alert('This is a ' + $(this).prop('class'))
}
答案 3 :(得分：0)
CSS不是由类直接分配，.css("background-color")会返回rgb()值，最好检查class或id在您的条件中的属性，请检查下面的示例：
$("div").click(function() {
if ( $(this).hasClass("square") ) {
alert("This is a square!");
} else {
alert("This is a circle!");
}
});
希望这有帮助。
$("div").click(function() {
if ( $(this).hasClass("square") ) {
alert("This is a square!");
} else {
alert("This is a circle!");
}
});#circle {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: blue;
margin: 10px;
}
.square {
width: 100px;
height: 100px;
background-color: green;
margin: 10px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="circle"></div>
<div class="square"></div>
<div class="square"></div>
答案 4 :(得分：0)
$("div").click(function() {
console.log($(this).css("background-color"));
if ($(this).css("background-color") == "rgb(0, 0, 255)") {
alert("This is a circle!");
} else {
alert("This is a square!");
}
});#circle {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: blue;
margin: 10px;
}
.square {
width: 100px;
height: 100px;
background-color: green;
margin: 10px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="circle"></div>
<div class="square"></div>
<div class="square"></div>
答案 5 :(得分：0)
#与CSS中的.不同，也不是相应的HTML属性。这不是为您提供问题的区别，它是故意引入的，有目的的设计，您必须在您的应用程序中反映出来。
#或id属性仅 。文档元素的命名空间字典的行为允许用URL来处理子文档片段。如果您想要演示或行为的一般性，id不是应该在文档的标记中使用的属性。这种反模式作为错误出现的级别是任意的，你的情况就是一个例子。
元素的class属性用于用户定义的标识符，用于区分行为或表示的相同语义含义的元素。理论上，与元素相关的无序类标识符集合不受限制。因此，当您设计应用程序并且必须区分元素时，有一个简单的线性过程可用于决定是否需要用户定义的标识符和/或涉及哪些属性：
是否有 id 或 class 以外的元素或属性在语义上已经区分？ HTML标准严格定义许多标签和属性，并以与定义一致的方式使用它们，您的应用程序可以获得所有新的相关进步的好处，而无需重复工作。如果新进展中断了您的工作，您将通过跟上标准来提前知道何时会发生这种情况。
这种区别是否有可能不适用于给定文档或适用于两个或多个元素？ id属性定义为每个文献;如果它在静态文档中有用，它可以在URI中引用，但它必须尊重一对一映射，或者它不是id。因此，当且仅当文件与一些具有各种形状的一对一质量相关时，元素的形状才是合适的。
如果排除了上述两个条款，则区别属于class或data属性。如果区别可能有一些具有代表性的对应关系，则可以用CSS表示，class属性很有吸引力。但是，如果区别更具可量化性，连续性或抽象性，则可以更好地表示为data属性。
在您的情况下，区别是元素的形状和用户点击的。因为元素的形状被明确定义为HTML未涵盖但延迟到CSS，因此需要CSS构造来进行区分。这意味着您的设计中的路径很少：style属性，class属性或完全CSS实现。由于涉及的逻辑比CSS更多，并且您可能不希望以几何术语定义形状，因此我们可以排除style和纯CSS。 class属性是应该区分两个元素形状的地方。
由于HTML标准确实定义了用户点击的DOM概念，并且您没有及时复杂化，因此您的应用程序应直接或通过{{onclick事件使用1}}或您喜欢的其他API。
jQuery的邪恶魔法的一部分是学习它比学习底层部分容易得多，让你成功地对系统的不完全理解达到有限的深度，然后将你倾倒到stackoverflow.com当你第一次超过这个深度。您现在必须阅读实际标准。写一个没有$的工作应用程序，错误将会如此明亮，以至于它会永远地灼伤你的眼球。 $适用于那些编写了足够基于DOM的代码的人，他们知道必须有一种更简单的方法。首次使用时，它应该是一种解脱，而不是对HTML应用程序设计的温和介绍。一旦你达到这个顿悟，你就可以回到$以及其他任何东西，但是DOM不是黑盒子或者你可以用脚注跳过的类。