Используйте динамически создаваемые переменные в функции фильтра jQuery - PullRequest
Новая
       9

Используйте динамически создаваемые переменные в функции фильтра jQuery

0 голосов
/ 18 февраля 2019

Тем временем знаете, как создать список переменных на основе счетчика (см. Создание имен динамических переменных на основе результата подсчета ).

Но теперь мне также нужно знать, как использовать эту динамическую переменную.список переменных внутри функции фильтра, который выглядит следующим образом: 

$("div.item")
  .filter(function( index ) {
  return $(this).data("sample1") == samplevariable1 &&
         $(this).data("muster1") == mustervariable1;
}).css( "border", "3px double red" );

Может быть от 1 до x динамически создаваемых переменных вместо SampleVariable1, SampleVariable2.

Как мне переписать мою существующую функцию фильтра, чтобы я мог использовать ее для стольких переменных, сколько нужно?

Спасибо за вашу помощь !!

JSFiddle: https://jsfiddle.net/SchweizerSchoggi/30od7vf8/58/

1 Ответ

0 голосов
/ 18 февраля 2019

Предполагается, что вы хотите выделить DIV-список, основываясь на совпадении некоторых сгенерированных значений

В следующем решении на основе предоставленной вами скрипты вы найдете:

  • a функция генератора , которая заполняет два массива последовательными числами (генерирует до N значений).См. подход с использованием массива к соответствующему вопросу Создание имен динамических переменных на основе результата подсчета
  • модификация -функция, которая имитирует некоторые измененияранее сгенерированные значения (как это может произойти в вашем скрипте, как вы сказали)
  • функция filter-and-highlight , которая выбирает HTML-элементы, используя jQuery (для элементов DIV с классом 'item') и фильтруйте их на основе сопоставления их DATA-атрибутов с соответствующими элементами массива.Эти отфильтрованные HTML-элементы будут выделены с использованием указанной CSS-границы.

Примечание: различная индексация

  • массив в JS обычно индексируется начиная сс 0 (первый элемент) и заканчивается N (где массив имеет N + 1 элементов).
  • Ваши атрибуты данных внутри DIV-элементов HTML (то есть data-sample1 или * 1037)*) индексируются, начиная с 1. Таким образом, решение определило специальную индексную переменную: let divIndex = i+1; 

/* N: used to generate N initial values as arrays */
const SEGMENT_COUNT = 2;
/* contains two dynamically generated arrays */
var generatedData = {elementsCount: 0, sample: [], muster: []};


/* Generate dynamic variables:
Creates two arrays named 'sample' and 
muster' inside sampleMusterArrays. These arrays are each filled with elementsCount elements (so that elements can be index from 0 to elementsCount-1 ). */
function generateValues(sampleMusterArrays, elementsCount) {
  for (let i = 0; i < elementsCount; i++) {
    sampleMusterArrays.sample[i] = i+1;
    sampleMusterArrays.muster[i] = i+1;
  }
  sampleMusterArrays.elementsCount = elementsCount;
}

function modifyGeneratedValues() {
  // modify FIRST value in sample-array
  generatedData.sample[0] = '2';
  // modify SECOND value in sample-array
  generatedData.sample[1] = 'x';
  // modify FIRST value in muster-array
  generatedData.muster[0] = '3';
  // modify SECOND value in muster-array
  generatedData.muster[1] = 'x';
}

/* filter DIVs with class "item" based on matching sampleMusterArrays to corresponding data-values */
function highlightFilteredDivItems(sampleMusterArrays) {

  $( "div.item" )
    .filter(function( index ) {
      let foundMatch = false;
      for (var i=0; i < sampleMusterArrays.elementsCount; i++) {
        let divIndex = i+1;
        foundMatch = foundMatch ||
             $(this).data("sample"+divIndex) == sampleMusterArrays.sample[i] &&
             $(this).data("muster"+divIndex) == sampleMusterArrays.muster[i];
     } // end for-loop
     return foundMatch;
    }).css( "border", "3px double red" );
    
}

/* MAIN */

// generate data
generateValues(generatedData, SEGMENT_COUNT);
console.log("--- generated values: ", generatedData);

/* do other stuff in between              */
/* e.g. arbitratily modify generated data */
modifyGeneratedValues();
console.log("--- modified generated values: ", generatedData);

// only the first Div should be marked
highlightFilteredDivItems(generatedData);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="item" data-sample1="2" data-muster1="3">Div 1</div>
<div class="item" data-sample1="3" data-muster1="3">Div 2</div>
<div class="item" data-sample1="4" data-muster1="3">Div 3</div>
...