Выбор одного элемента с несколькими селекторами в Jquery

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, но я не могу заставить его работать. У меня есть блок switch / case, который выбирает, какой div выбрать.

я пробовал разные варианты этого выбора:

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

также

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

и несколько других комбинаций, которые я помню

Я думаю, что проблема усугубляется (или может быть перепутана: D) из-за того, что столбцы имеют одно и то же фоновое изображение, и это установлено в CSS

.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)');

Но вы не должны иметь больше одного элемента с уникальным идентификатором. Возможно, вам следует обозначить строки как дополнительные классы так:

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

Вы можете выбрать его так:

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

Edit:

Причина, по которой код, который вы пробовали, была неудачной по следующим причинам:

1. В первом примере вы выбираете div#row1 с исходным $('#row1'), а затем пытаетесь использовать .find('.col1') для выбора правильного. Это не будет работать, потому что find просматривает потомков выбранного элемента, а не сам элемент. Используя $('#row1.col1') вместо этого, вы говорите, что хотите #row1 с классом .col1.
2. Во втором примере ваши параметры обращены и по-прежнему проблема первого примера. Правильный порядок - $(selector, scope), где область действия - это элемент, которым вы хотите ограничить поиск, а не просматривать весь документ. Вы использовали $('#row1', '.col1'), который будет искать элемент с идентификатором row1 внутри любого элемента, соответствующего .col1. Конечно, поиск .col1 внутри из #row1 все равно будет той же проблемой, что и ваш первый пример.

Answer 2

Я просто догадываюсь, что вам нужны разные изображения при наведении курсора на столбец 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);
 })
}

Answer 3

идентификатор = '' должен быть уникальным для документа,

чтобы использовать несколько селекторов, вы просто комбинируете их, как в css

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

и я бы предложил вынуть onMouseOver = '' из вашего html и прикрепить его внутри javascript с помощью jquery

также, глядя на имеющееся у вас соглашение об именах, вы выбираете элементы на основе позиции, вы можете сделать это без привязки индексов к классам с

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

Answer 4

идентификаторы должны быть уникальными для всего документа. то:

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