Javascript/jQuery .each 和语法问题

Question

我在编写一个函数来更改 document.ready 上 div 上的背景图像时遇到了一些麻烦

我还没有制作 jsfiddle，因为我认为问题只是我糟糕的（但正在改进）jQuery 技能。如果您认为需要，请告诉我。

背景信息 -> 我有一个 div 的集合，其中包含一个 portlet-visible 或 portlet-hidden 类，这些 div 中的每一个都有另一类红色箭头（或不同的颜色，但是一旦我有了一种颜色，它应该很容易推断）。当页面加载时，我想要一个函数，它可以找到所有具有 portlet-hidden 或 portlet-visible 类的 div，并查看它们是否具有红色箭头类。如果他们这样做，则将背景图像 src 更改为不同的值。

我真的很难解决这个问题，非常感谢任何帮助。

我的 HTML

<div class="portlet-visible red-arrow"></div>

我的 CSS

div.portlet-visible
  {
    position:absolute;
    top:12px;
    right:10px;
    background-image:url(../images/red-arrow-up.png);
    width:14px;
    height:14px;    
  }

最后是我的 javascript

$(document).ready(function() {
        $(".portlet-hidden" && ".portlet-visible").each(function()  {
            if ($("this").hasClass(".red-arrow")) {
                $(this).css(background-image, url('"url(../images/blue-arrow-up.png)"')
            };
        });

    });     

Answer 1

多个选择器应该用逗号分隔（,），css 方法也需要一个字符串或一个映射。试试这个。

$(document).ready(function() {
        $(".portlet-hidden, .portlet-visible").each(function()  {
            if ($(this).hasClass("red-arrow")) {
                $(this).css('background-image', "url('../images/blue-arrow-up.png')")
            };
        });

    });   

Answer 2

首先... Archer 的回答很准确——你试图用 jQuery 做的事情可以单独用 CSS 来完成。

但如果出于某种原因你确实需要 jQuery，这里有几处是错误的。

首先，正如 justtkt 在他的回答中所说，您的选择器是错误的。没有必要（并且在语法上错误）使用条件运算符，如 && 或 ||在 jQuery 选择器中。这仅仅是因为已经条件语法内置到CSS，jQuery选择器直接基于它。

.this-class.that-class

选择 both .this-class 和 .that-class 的所有元素。

#this-id.that-class

是一个非常（可能过于）特定的声明，它选择一个元素（每页应该只有一个 ID）both #this-id 和 .that-c​​lass

有关选择器的更多信息，请阅读这个非常彻底、完整且具有教育意义的链接http://www.w3.org/TR/selectors/

另外且重要的是

这一行：

$("this").hasClass(".red-arrow")

错了！ hasClass 不需要选择器（“.”），因为它只需要一个类。应该是

  $("this").hasClass("red-arrow")

还有！！

 $(this).css(background-image, url('"url(../images/blue-arrow-up.png)"')

这一行有一些错误……应该是：

 $(this).css("background-image", "url(../images/blue-arrow-up.png)")

虽然我认为下面的语法更简单：

css({'background-image' : 'url(../images/blue-arrow-up.png)'})

Answer 3

除非有特定原因你想用 jQuery 来做这件事，否则你应该只使用 CSS...

div.portlet-visible
{
    background-image:url(../images/red-arrow-up.png);
    width:14px;
    height:14px;    
}
div.portlet-visible.red-arrow
{
    background-image:url(../images/blue-arrow-up.png);
}

任何具有“portlet-visible”类的div都在第一个块中定义，任何具有“portlet-visible”类的div和“red-arrow”都将使用相同的css，还要应用新的背景图片。

http://jsfiddle.net/johncmolyneux/gcm5b/

Answer 4

1. 更改选择器".portlet-hidden,.portlet-visible"
2. 将 if 条件从字符串更改为 boolean

3. 更改css。

   $(".portlet-hidden,.portlet-visible").each(function(){
      if ($("this").hasClass("red-arrow")){
        $(this).css("background-image", "url('../images/blue-arrow-up.png')");
     }
   });
   

Answer 5

if ('$("this").hasClass(".red-arrow")') {

应该是：

if ($(this).hasClass(".red-arrow")) {

Answer 6

不要将&& 两个选择器放在一起，而是使用multiple selector 像$(".portlet-hidden, .portlet-visible") 或.add() 方法来构建您的jQuery。

您当前的行实际上是将两个字符串组合在一起，我相信这将在 Javascript 中返回 boolean true。

Answer 7

您的选择器不正确。如果你想匹配两个类的东西，那就是：

$('.portlet-hidden.portlet-visible').each( ...

如果你想匹配任何一个类：

$('.portlet-hidden, .portlet-visible').each( ...

表达式".portlet-hidden" && ".portlet-visible" 的计算结果始终为".portlet-visible"。

Answer 8

我会这样写选择器

 $(".portlet-hidden, .portlet-visible")