Lorsque je crée des tableaux et que je souhaite vérifier si chaque élément hasClass en cliquant sur les cellules correspondantes (au-dessus des cellules)

Mon travail est comme ci-dessous.

Mais cela n'a pas bien fonctionné.

Comment puis-je y parvenir?

Et quel est le mauvais point?

Merci

$("td.number").click(function(){
  id=$(this).index();
  $("td.color").index(id).hasClass("aqua");
  });
td {
  transition-duration: 0.5s;
  border: solid black 1px;
  padding: 5px;
}

.number{
cursor:pointer;}

table {
  border-collapse: collapse;
}

.color{
 padding:5px;
 }
 
.aqua {
  background-color: aqua;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id=calendar></div>

<script>
let html = ''
html += '<table>';
let i = 0;

html += '<tr>';
for (let d = 0; d < 15; d++) {
  i = i + 1;
  html += '<td class="number">' + i +'</td>'
}
html += '</tr>';

for (let w = 0; w < 1; w++) {
  html += '<tr>';
  for (let d = 0; d < 15; d++) {
    html += '<td class="color"></td>'
    }
    html += '</tr>';
  }
html += '</table>'
document.querySelector('#calendar').innerHTML = html;

const arr = [1, 2, 10, 11, 14];

$("td.color")
  .filter(function() { return arr.includes($(this).index()+1); })
  .addClass('aqua');
</script>
0
Heisenberg 11 avril 2020 à 16:54

2 réponses

Meilleure réponse

.index() est utilisé pour renvoyer la position sous forme d'entier, pas pour trouver un élément basé sur son index - pour cela vous voulez .eq()

Violon mis à jour:

$("td.number").click(function(){
  id=$(this).index();
  $(this).toggleClass("aqua", $("td.color").eq(id).hasClass("aqua"));
});
td {
  transition-duration: 0.5s;
  border: solid black 1px;
  padding: 5px;
}

.number{
cursor:pointer;}

table {
  border-collapse: collapse;
}

.color{
 padding:5px;
 }
 
.aqua {
  background-color: aqua;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id=calendar></div>

<script>
let html = ''
html += '<table>';
let i = 0;

html += '<tr>';
for (let d = 0; d < 15; d++) {
  i = i + 1;
  html += '<td class="number">' + i +'</td>'
}
html += '</tr>';

for (let w = 0; w < 1; w++) {
  html += '<tr>';
  for (let d = 0; d < 15; d++) {
    html += '<td class="color"></td>'
    }
    html += '</tr>';
  }
html += '</table>'
document.querySelector('#calendar').innerHTML = html;

const arr = [1, 2, 10, 11, 14];

$("td.color")
  .filter(function() { return arr.includes($(this).index()+1); })
  .addClass('aqua');
</script>
1
freedomn-m 11 avril 2020 à 14:04

Vous devez changer votre sélecteur en utilisant eq() et non index() pour accéder à l'élément dont vous avez besoin:

$("td.number").click(function(){
  var id = $ (this).index();
  $("td.color").eq(id).hasClass("aqua");
});
1
Dario 11 avril 2020 à 14:03