Javascript/jQuery .each 和语法问题

Javascript/jQuery .each and syntax issue

本文关键字：语法 问题 each jQuery Javascript      更新时间：2023-09-26

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

我没有做过jsfiddle，因为我认为问题只是我糟糕的(但正在提高(的jQuery技能。如果您认为需要，请告诉我。

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

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

我的网页

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

多个选择器应该用逗号( , ( 分隔，并且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')")
            };
        });
    });

我会这样写选择器

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

除非有特定的原因你想用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">和"red-arrow"的div都将使用相同的css，但也应用新的背景图像。

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

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

但是，如果出于某种原因您确实需要jQuery，那么这里有一些错误。

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

.this-class.that-class

选择同时具有 .this-class 和 .that-class 的所有元素。

#this-id.that-class

是一个非常(可能过于(具体的声明，它选择一个同时具有 #this-id 和 .that-class 的元素(每页应该只有一个 ID(

有关选择器的更多信息，请阅读此非常彻底，完整且具有教育意义的链接 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)'})

您的选择器不正确。 如果你想将事物与两个类相匹配，那就是：

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

如果要匹配任一类：

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

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

与其将两个选择器&&在一起，不如使用$(".portlet-hidden, .portlet-visible")或.add((方法等多个选择器来构建jQuery。

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

if ('$("this").hasClass(".red-arrow")') { <--- 这个条件在这里是一个字符串

应该是：

if ($(this).hasClass(".red-arrow")) {
  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')");
  }
});
相关文章：