Tengo algunos botones que hago visibles en el momento en que hago visible mi gráfico. También puse una línea a través del texto según el estado de visibilidad del conjunto de datos. ¿Hay alguna manera de pasar un argumento a jquery $() para que pueda manejar este logix en un bucle for ordenado?
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"); }); }En el ejemplo muestro que lo hago para tres botones para mayor claridad del código, pero en mi código hay bastantes botones por lo que el código parece claramente mejorable :).
Dale a todos tus #ds0/#ds1/etc la misma class="ds" , también dales un data-datasetid="0" para reemplazar el #ds0, etc.
<button class="ds" data-datasetid="0">toggle data set 0</button> <button class="ds" data-datasetid="1">toggle data set 1</button>luego reemplace su código con:
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"); }); }Estás repitiendo código. Entonces, simplemente escriba un método que haga la parte repetitiva de su código.
Por ejemplo:
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"); }); }Entonces solo necesita llamar a esta función varias veces. Por ejemplo:
[1, 2, 3, 4, 5].forEach( i => doThings(i))