특정 ID가

Question

인 행을 여러 개 강조 표시 테이블에 <td> 개의 요소를 강조 표시하고 특정 ID를 마우스로 가리키면 해결 방법을 찾고 있습니다. 당신이 ID = '위해 1'로 TD를 셀 위로 마우스를 가져 가면

내 코드가

$('#orderstable').hover(function() 
 
    { 
 
     $('#id_1').find('td').addClass('hover'); 
 
    }, function() 
 
    { 
 
     $('#id_1').find('td').removeClass('hover'); 
 
    });

#orderstable td 
 
{ 
 
    padding:0.7em; 
 
    border:#969696 1px solid; 
 
} 
 

 
.hover 
 
{ 
 
    background:yellow; 
 
}

<table id="orderstable"> 
 
<thead> 
 
    <tr> 
 
     <th>Proces</th> 
 
     <th>Step 1</th> 
 
     <th>Step 2</th> 
 
     <th>Step 3</th> 
 
    </tr> 
 
</thead> 
 
<tbody> 
 
    <tr> 
 
     <td>Proces 1</td> 
 
     <td id='order_2'>job 2</td> 
 
     <td id='order_1'>job 1</td> 
 
     <td id='order_3'>job 3</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Proces 2</td> 
 
     <td id='order_3'>job 3</td> 
 
     <td id='order_4'>job 4</td> 
 
     <td id='order_1'>job 1</td> 
 
    </tr> 
 
</tbody> 
 
</table>

내가 달성하기 위해 노력하고있어 것은,이 <TD>와 다른 강조 표시됩니다 id = 'order_1'인 td입니다.
물론 다른 ID (order_2, order_3 등)에 대해 동일한 기능이 필요합니다.

아이디어가 있으십니까?

Answer 1

고유 한 ID 여야합니다. 클래스를 사용해야합니다. 예. class="order1" 및 $('.order1').addClass(...). 또한 JS는 존재하지 않는 항목을 선택할 때 꺼져 있습니다. td 내부에서 대신 해당 선택자를 타겟팅합니다.

$('.order_1').hover(function() { 
    $('.order_1').toggleClass('hover'); 
}); 

하지만하기로 결정 :

$('#orderstable').on('mouseover', 'td', function() { 
    var elemClass = this.className 
     .split(' ') // Gets array of classes 
     .filter(function(item) { 
      return item.match(/order_\d/) || false; 
     }) // Filter down to classes matching 'order_[NUMBER]' 
     .pop(); // Get the class. (Actually gets the last item in an array that contains only one item, so same thing.) 
    $('.' + elemClass).addClass('hover'); 
}).mouseout(function() { 
    $(this).find('td').removeClass('hover'); 
}); 

Here's a JSFiddle demonstrating this.

현실적으로, 당신은 또한 모든 개인 클래스에 대해 다음과 같은 작업을 수행 할 수 있습니다 : 당신의 목표를 달성하기 위해, 나는 이런 식으로 뭔가를 할 것 "자동화".

Answer 2

대신 클래스를 사용하는 것이 좋습니다. 그러나 nth child css 의사를 사용하여 질문에 대답 할 수 있습니다.

예제로 여기에 빠른 JSFiddle을 만들었습니다. https://jsfiddle.net/fzjuxyeL/8/ - 업데이트되었습니다.

#order_1:nth-child(1n+1) 
// Start at 1 and increment by 1 finding all divs with ID 

$('#order_1:nth-child(1n+1)').hover(function(){ 
    $('#order_1:nth-child(1n+1)').toggleClass('toggled') 
}); 
// Applies class to all divs with specified ID when hovered