Do tworzenia strony internetowej używam HTML + JS + CSS. Zamierzam utworzyć tablicę, która może filtrować csv dla określonych wartości. Robiąc to, potrzebuję nagłówków kolumn, co próbuje zrobić ta funkcja.

Mam 3 przyciski takie jak ten:

<button type="button" onclick='pushBx()'>Bx</button>
<button type="button" onclick='pushBy()'>By</button>
<button type="button" onclick='pushBz()'>Bz</button>

To uruchamia funkcję taką jak ta:

function pushBz() {
  clickedBusinesses.push('Bz');

  console.log(clickedBusinesses);
}

To skłania do:

var clickedBusinesses = []

Ale moja konsola wygląda tak:

["By", "By", "Bz", "Bz", "Bz", "Bz"]

Chciałbym utworzyć funkcję, która po naciśnięciu przycisku usuwa identyfikator, jeśli jest już w tablicy, w przeciwnym razie przepchnie go do tablicy, więc moja tablica wygląda bardziej tak:

["By", "Bz"]

Próbowałem zbudować instrukcję if, ale to nie działa.

Czy ktoś może doradzić?

0
AliShahVis 3 kwiecień 2020, 13:35

5 odpowiedzi

Najlepsza odpowiedź

Możesz to osiągnąć dzięki temu podejściu;

function pushBz() {
  if(clickedBusinesses.includes('Bz')){
     // removing the element from that array
     clickedBusinesses = clickedBusinesses.filter( cb => cb !== 'Bz' )
  }else{
     clickedBusinesses.push('Bz')
  }
  console.log(clickedBusinesses);
}

Jednak kod można nieco ulepszyć, używając jednej funkcji zamiast trzech podobnych funkcji z zakodowanymi na stałe wartościami;

<button type="button" onclick='toggleClickedBuz("Bx")'>Bx</button>
<button type="button" onclick='toggleClickedBuz("By")'>By</button>
<button type="button" onclick='toggleClickedBuz("Bz")'>Bz</button>

I uruchamia taką funkcję:

function toggleClickedBuz( bizStr ) {
  if(clickedBusinesses.includes(bizStr)){
     // removing the element from that array
     clickedBusinesses = clickedBusinesses.filter( cb => cb !== bizStr )
  }else{
     clickedBusinesses.push(bizStr)
  }
}
0
Mhmdrz_A 3 kwiecień 2020, 11:04

O ile kolejność elementów nie jest rzeczywiście ważna, użyj zwykłego przedmiotu (lub Set, jeśli masz ochotę):

const clickedBusinesses = {};
function toggle(business) {
  clickedBusinesses[business] = !clickedBusinesses[business];
}
function pushBz() {
  toggle('Bz');
  console.log(clickedBusinesses);
}

W ten sposób clickedBusinesses będzie miało wartość true dla wszystkich włączonych firm lub false (lub nie będzie miała żadnej wartości) dla wyłączonych.

Aby wyciągnąć z tego tablicę,

function getClickedBusinesses() {
  return Object.keys(clickedBusinesses).filter(key => clickedBusinesses[key]);
}

Zwróci (np.) ['Bz'].

0
AKX 3 kwiecień 2020, 10:39

Innym podejściem jest usuwanie zduplikowanych elementów po zaktualizowaniu tablicy

Najpierw zdefiniuj funkcję:

var removeDublicate = function(arrayToBeCleaned){
   var uniqueArray = [];
   $.each(arrayToBeCleaned, function(i, el){
       if($.inArray(el, uniqueArray) === -1) uniqueArray.push(el);
   });
   return uniqueArray;
}

Następnie użyj funkcji:

var myCrowdedArray = ["A","A","A","B","B","C","C"];

var uniqueArray = removeDublicate(myCrowdedArray)

W Twoim przypadku:

function pushBz() {
  clickedBusinesses.push('Bz');
  clickedBusinesses = removeDublicate(clickedBusinesses)
  console.log(clickedBusinesses);
}
0
Project Mayhem 3 kwiecień 2020, 11:00

Możesz wziąć pojedynczą funkcję z wartością jako parametrem i wyszukać wartość i dodać lub podzielić tablicę.

function push(value) { 
    var index = array.indexOf(value);
    
    if (index === -1) array.push(value);
    else array.splice(index, 1);
    
    document.getElementById('out').innerHTML = array.join(' ');
}

var array = [];
<button type="button" onclick="push('Bx');">Bx</button>
<button type="button" onclick="push('By')">By</button>
<button type="button" onclick="push('Bz')">Bz</button>
<div id="out"></div>
0
Nina Scholz 3 kwiecień 2020, 11:13

W twoim przypadku myślę, że lepiej jest użyć Ustaw.

Twoja funkcja powinna wyglądać tak

clickedBusinesses = new Set();

function pushBz() {
  if (clickedBusinesses.has('Bz'))
    clickedBusinesses.delete('Bz');
  else
    clickedBusinesses.add('Bz');
}

Zestaw ma lepszą wydajność, gdy trzeba zachować unikalne wartości. Kiedy musisz przekonwertować go na tablicę, możesz użyć [...set]

0
Khang Le 3 kwiecień 2020, 11:18