Question

我对Jquery有点新手，所以这可能很容易，然后我再也无法在Google上找到任何东西。所以这里。

我基本上有这个：

<div>
    <div id="row1" class="col1" onMouseOver="OnMouseOver(11)">
         I dont want to select this
    </div>
    <div id="row1" class="col2" onMouseOver="OnMouseOver(12)">
         I want to select this
    </div>
    <div id="row2" class="col1" onMouseOver="OnMouseOver(21)">
         I dont want to select this
    </div>
    <div id="row2" class="col2" onMouseOver="OnMouseOver(22)">
         I dont want to select this
    </div>
</div>

我想只选择一个div（例如＃row1 .col2）来改变css背景图像，但我无法让它工作。因为它有一个开关/案例块，可以选择要选择的div。

我尝试过这种选择的不同变体：

$('#row1').find(".col1").css('background-image', 'url(Images/LosCol1Over.png)')

也

$('#row1','.col2').css('background-image','url(Images/LosCol1Over.png)')

和其他几个我能记住的组合

我认为这个问题因为列具有相同的背景图像并且在css中设置

而复杂化（或者可能是混淆：D）

.col1{
    background-image: url(Images/LosCol1.png)
}    
.col2{
    background-image: url(Images/LosCol1.png)
}

有什么想法吗？

Answer 1

这个类应该像这样对抗#id选择器：

$('#row1.col2').css('background-image','url(Images/LosCol1Over.png)');

但是你真的不应该有一个具有唯一ID的元素。也许您应该将行指定为其他类，以便：

<div class="row1 col1"...
<div class="row1 col2"...

然后您可以这样选择：

$('.row1.col2').css('background-image','url(Images/LosCol1Over.png)');

修改

您尝试失败的代码出于以下原因：

在您的第一个示例中，您选择了div#row1初始$('#row1')，然后尝试使用.find('.col1')选择正确的find。这不起作用，因为$('#row1.col1')查看所选元素的后代，而不是元素本身。相反，使用#row1表示您希望拥有.col1类的$(selector, scope)。

在您的第二个示例中，您的参数已反转和仍然存在第一个示例的问题。正确的顺序是$('#row1', '.col1')，其中范围是您要限制搜索而不是查看整个文档的元素。您使用了row1来查找内容为.col1 的元素匹配.col1的任何元素。当然，在#row1中查找内的{{1}} 仍然会与您的第一个示例相同。

Answer 2

ID在整个文档中必须是唯一的。然后：

$('#unique-id').css('background-image', 'url(Images/LosCol1Over.png)')

Answer 3

id =''应该是文档的唯一，

使用多个选择器，就像在css中一样组合它们

 $("#foo.bar").css(....

我建议从你的html中取出onMouseOver =''并将其附加到javascript中的javascript

还要查看您根据位置选择元素的命名约定，您可以在不使用

的类附加索引的情况下执行wthat

 $("#parent div:eq(1)") ....

Answer 4

我只是猜测你想要第1列和第2列的不同鼠标悬停图像？也许尝试这样的事情：

CSS

.col1{ background-image: url(Images/LosCol1.png) }
.col1Mo{ background-image: url(Images/LosCol1Over.png) }

.col2{ background-image: url(Images/LosCol1.png) }
.col2Mo{ background-image: url(Images/LosCol2Over.png) }

HTML

<div>
 <div class="col1">
  I dont want to select this
 </div>
 <div class="col2">
  I want to select this
 </div>
 <div class="col1">
  I dont want to select this
 </div>
 <div class="col2">
  I dont want to select this
 </div>
</div>

脚本

$(document).ready(function(){
 addMo('col1');
 addMo('col2');
})
function addMo(cName){
 $('.' + cName).hover(function(){
  $(this).removeClass(cName).addClass(cName + 'Mo');
  }, function(){
  $(this).removeClass(cName + 'Mo').addClass(cName);
 })
}

在Jquery中选择一个具有多个选择器的元素

4 个答案: