Markieren Sie mehrere Zeilen mit spezifischen IDs.

Question

Suchen Sie nach einer Lösung, um <td> Elemente in der Tabelle hervorzuheben, mit spezifischen IDs bei Hover.

Mein Code

$('#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>

Was ich versuche zu erreichen, wenn Sie die Maus über td Zelle mit id = 'bestellen 1' schweben, wird es dieses <TD> und auch andere markieren tds mit id = 'order_1'.
Natürlich brauche ich die gleiche Funktionalität für andere IDs (order_2, order_3 etc.).

Irgendeine Idee?

Answer 1

IDs müssen eindeutig sein. Sie sollten Klassen verwenden. Ie. class="order1" und $('.order1').addClass(...). Außerdem ist Ihr JS weit entfernt, da Sie Elemente auswählen, die nicht vorhanden sind, und auf diese Selektoren und stattdessen auf die Tds selbst abzielen. Um Ihr Ziel zu erreichen, würde ich so etwas tun:

$('#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.

Realistisch betrachtet, auch so etwas wie die folgenden für jede einzelne Klasse tun können:

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

Aber ich beschlossen, "automatisiere" dies.

Answer 2

Ich würde empfehlen, stattdessen Klassen zu verwenden, aber um Ihre Frage zu beantworten, können Sie dies erreichen, indem Sie den n-ten Kind-CSS-Pseudo verwenden.

Ich habe hier ein schnelles JSFiddle als Beispiel erstellt. https://jsfiddle.net/fzjuxyeL/8/ - Aktualisiertes Arbeiten!

#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