J'ai des boutons que je rends visibles au moment où je rends mon graphique visible. J'ai également mis une ligne dans le texte en fonction de l'état de visibilité du jeu de données. Existe-t-il un moyen de passer un argument au jquery $() afin que je puisse gérer ce logix dans une boucle for soignée?

if (!this.drawnAlready) {
        //button subscription
        $('#ds0').css("visibility", "visible");
        $('#ds0').click( function(){
            chartTest.data.datasets[0].hidden = !chartTest.data.datasets[0].hidden;
            chartTest.update();
            $('#ds0').css("text-decoration", chartTest.data.datasets[0].hidden ? "line-through" : "none");
        });
        $('#ds1').css("visibility", "visible");
        $('#ds1').click( function(){
            chartTest.data.datasets[1].hidden = !chartTest.data.datasets[1].hidden;
            chartTest.update();
            $('#ds1').css("text-decoration", chartTest.data.datasets[1].hidden ? "line-through" : "none");
        });
        $('#ds2').css("visibility", "visible");
        $('#ds2').click( function(){
            chartTest.data.datasets[2].hidden = !chartTest.data.datasets[2].hidden;
            chartTest.update();
            $('#ds1').css("text-decoration", chartTest.data.datasets[2].hidden ? "line-through" : "none");
        });
        $('#ds3').css("visibility", "visible");
        $('#ds3').click( function(){
            chartTest.data.datasets[3].hidden = !chartTest.data.datasets[3].hidden;
            chartTest.update();
            $('#ds3').css("text-decoration", chartTest.data.datasets[3].hidden ? "line-through" : "none");
        });
}

Dans l'exemple, je montre que je le fais pour trois boutons pour la clarté du code, mais dans mon code il y a pas mal de boutons donc le code semble clairement améliorable :).

0
rustyBucketBay 2 oct. 2021 à 15:04

2 réponses

Meilleure réponse

Vous répétez le code. Donc, écrivez simplement une méthode qui fait la partie répétitive de votre code.

Par exemple:

function doThings(i)
{
  const elementId = '#ds'+i;
  $(elementId).css("visibility", "visible");
        $(elementId).click( function(){
            chartTest.data.datasets[i].hidden = !chartTest.data.datasets[i].hidden;
            chartTest.update();
            $(elementId).css("text-decoration", chartTest.data.datasets[i].hidden ? "line-through" : "none");
        });
}

Ensuite, il vous suffit d'appeler cette fonction plusieurs fois. Par exemple:

[1, 2, 3, 4, 5].forEach( i => doThings(i))
1
zelite 2 oct. 2021 à 12:12

Donnez à tous vos #ds0/#ds1/etc le même class="ds", donnez-leur aussi un data-datasetid="0" pour remplacer le #ds0 etc

<button class="ds" data-datasetid="0">toggle data set 0</button>
<button class="ds" data-datasetid="1">toggle data set 1</button>

Puis remplace ton code par :

if (!this.drawnAlready) {
    $('.ds').css("visibility", "visible");
    $('.ds').click(function() {
        var dataset = $(this).data("datasetid");
        chartTest.data.datasets[dataset].hidden = !chartTest.data.datasets[dataset].hidden;
        chartTest.update();
        $(this).css("text-decoration", chartTest.data.datasets[dataset].hidden ? "line-through" : "none");
    });
}
2
freedomn-m 2 oct. 2021 à 12:10