Как переставить блоки div с js написанными детьми, следуя данному массиву? - PullRequest
Новая
       0

Как переставить блоки div с js написанными детьми, следуя данному массиву?

0 голосов
/ 27 апреля 2020

Я пытаюсь составить список, в котором рассчитывается сумма выбранных чисел. На самом деле их более 300, поэтому я ограничился 6 здесь. Как правило, добавление «Изображение с именем», Смена языка, Расчеты все работает. Я также попробовал «расположить кнопки» в небольшом масштабе, для чего это тоже работает. Но когда я добавляю «переупорядочить» кнопки для списка, страница просто продолжает обновляться до первоначального состояния. Есть ли способ сделать трюк перестановки DIV? (Кстати, похоже, это работает на Firefox, Chrome и Safari, но просто не работает на IE / Edge) 

let imgList = [{
    name: 30001,
    file: 'icon/30001.gif',
    jpName = 'ア',
    engName = 'alpha'
  },
  {
    name: 30002,
    file: 'icon/30002.jpg',
    jpName = 'イ',
    engName = 'beta'
  },
  (name: 40001, file: 'icon/40001.gif', jpName = 'ウ',
    engName = 'gamma'
  },
  {
    name: 41002,
    file: 'icon/41002.jpg',
    jpName = 'エ',
    engName = 'delta'
  },
  {
    name: 50301,
    file: 'icon/50301.jpg',
    jpName = 'オ',
    engName = 'mu'
  },
  {
    name: 50401,
    file: 'icon/50401.jpg',
    jpName = 'ン',
    engName = 'nu'
  }
];

//Language Controler
let control = [{
    name: 'jp',
    title: '計算',
    ans: '答え'
  },
  {
    name: 'eng',
    title: 'Calculations',
    ans: 'Answer'
  }
]

//Array Lists
let ArrayOne = ['test30001', 'test30002', 'test40001', 'test41002', 'test50301', 'test50401'];
let ArrayTwo = ['test50301', 'test50401', 'test40001', 'test41002', 'test30001', 'test30002'];
let ArrayThree = ['test30001', 'test40001', 'test50301', 'test50401', 'test30002', 'test41002'];

//Give images and name
function goImage(arr) {
  let x = imgList.findIndex(num => num['name'] === arr);
  document.getElementById('art' + arr).innerHTML = '<img src="' + imgList[x].file + '"><br>' + imgList[x][language + 'Name'];
}


//Change page language
function placeAll() {
  let tb = control.findIndex(lang => lang['name'] === language);

  document.getElementById('title').innerHTML = control[tb].title;
  document.getElementById('totalName').innerHTML = control[tb].ans;

  imgList.forEach(nameFile => {
    goImage(nameFile.name)
  });
}

//when select other languages
let language = 'jp';

function handleLang(myRadio) {
  language = myRadio.value;
  placeAll();
}

//amount calculations
function calculate() {
  var calValue = 0;

  countThese.each(function() {
    calValue += +$(this).val();
  })

  localStorage.setItem($(this).attr('id'), $(this).val());

  let allRate = imgList.length * 10;

  document.getElementById('totalAm').innerHTML = ((calValue / allRate) * 100).toFixed(2) + '%';
}

let countThese = $('#testBox:input').click(calculate);

//rearrange div boxes
function ArrayOne() {
  $('#testBox div').each(function() {
    if ($.inArray($(this).attr('id'), ArrayOne) == -1) {
      $('#testBox').append($('#' + $(this).attr('id')));
    }
  });
};

function ArrayTwo() {
  $('#testBox div').each(function() {
    if ($.inArray($(this).attr('id'), ArrayTwo) == -1) {
      $('#testBox').append($('#' + $(this).attr('id')));
    }
  });
};

function ArrayThree() {
  $('#testBox div').each(function() {
    if ($.inArray($(this).attr('id'), ArrayThree) == -1) {
      $('#testBox').append($('#' + $(this).attr('id')));
    }
  });
};
<div id='title'></div>
<form id="calcul">
  <div class="container" id="testBox">

    <div class="tryBox" id="test30001">
      <div id="art30001" class="star3">
      </div>
      <div id="ca30001" class="calLV3">
        <select id="t30001" class="sLV3">
          <option value="0">0</option>
          <option value="0">1</option>
          <option value="0">2</option>
        </select>
      </div>
    </div>

    <div class="tryBox" id="test30002">
      <div id="art30002" class="star3">
      </div>
      <div id="ca30002" class="calLV3">
        <select id="t30002" class="sLV3">
          <option value="0">0</option>
          <option value="1">1</option>
          <option value="2">2</option>
        </select>
      </div>
    </div>

    <div class="tryBox" id="test40001">
      <div id="art40001" class="star4">
      </div>
      <div id="ca40001" class="calLV4">
        <select id="t40001" class="sLV4">
          <option value="0">0</option>
          <option value="2">2</option>
          <option value="4">4</option>
        </select>
      </div>
    </div>

    <div class="tryBox" id="test41002">
      <div id="art41002" class="star4">
      </div>
      <div id="ca41002" class="calLV4">
        <select id="t41002" class="sLV4">
          <option value="0">0</option>
          <option value="2">2</option>
          <option value="4">4</option>
        </select>
      </div>
    </div>

    <div class="tryBox" id="test50301">
      <div id="art50301" class="star5">
      </div>
      <div id="ca50301" class="calLV5">
        <select id="t50301" class="sLV5">
          <option value="0">0</option>
          <option value="1">1</option>
          <option value="3">3</option>
          <option value="5">5</option>
          <option value="7">7</option>
        </select>
      </div>
    </div>

    <div class="tryBox" id="test50401">
      <div id="art50401" class="star5">
      </div>
      <div id="ca50401" class="calLV5">
        <select id="t50401" class="sLV5">
          <option value="0">0</option>
          <option value="1">1</option>
          <option value="3">3</option>
          <option value="5">5</option>
          <option value="7">7</option>
        </select>
      </div>
    </div>

  </div>
</form>

<div id='button1'>
  <button onclick="ArrayOne()">WAY1</button>
  <button onclick="ArrayTwo()">WAY2</button>
  <button onclick="ArrayThree()">WAY3</button>
</div>

<div id='lang'>
  <input type="radio" id="jp" name="lang" value="jp" onchange="handleLang(this)" checked>
  <label for="jp">日本語</label>
  <input type="radio" id="eng" name="lang" value="eng" onchange="handleLang(this)">
  <label for="eng">English</label>
</div>

<div class="answer">
  <div class="totalName" id="totalName"></div>
  <div class="totalAm" id="totalAm"></div>
</div>


<script src="script.js"></script>

1 Ответ

0 голосов
/ 27 апреля 2020

Есть некоторые синтаксические проблемы, такие как = в объявлениях вашей карты объектов, переопределение ArrayOne в качестве функции и ( в вашей карте объектов.

Вы перебираете HTML элементов в том порядке, в котором они появляются, и поиск в массиве каждый раз как фильтр. Если вы хотите, чтобы они были в порядке, указанном в массиве, вы должны выполнять итерацию по порядку над массивом.
Или вы должны учитывать индекс массива при добавлении и вставлять их в правильную позицию, которая более вовлечен. Проще всего было бы использовать CSS flex и order: (number)

. Кроме того, id s должен быть уникальным для документа, поэтому поиск в #testBox и затем поиск нужного id не должно быть необходимо. Вы должны иметь возможность использовать селектор #id напрямую. Я сохранил селекторы как $('#testBox div#'+id), просто чтобы соответствовать вашему исходному коду, но на самом деле это должно быть просто $('#'+id') или document.getElementById(id)

let imgList = [{
    name: 30001,
    file: 'icon/30001.gif',
    jpName: 'ア',
    engName: 'alpha'
  },
  {
    name: 30002,
    file: 'icon/30002.jpg',
    jpName: 'イ',
    engName: 'beta'
  },
  {name: 40001, file: 'icon/40001.gif', jpName: 'ウ',
    engName: 'gamma'
  },
  {
    name: 41002,
    file: 'icon/41002.jpg',
    jpName: 'エ',
    engName: 'delta'
  },
  {
    name: 50301,
    file: 'icon/50301.jpg',
    jpName: 'オ',
    engName: 'mu'
  },
  {
    name: 50401,
    file: 'icon/50401.jpg',
    jpName: 'ン',
    engName: 'nu'
  }
];

//Language Controler
let control = [{
    name: 'jp',
    title: '計算',
    ans: '答え'
  },
  {
    name: 'eng',
    title: 'Calculations',
    ans: 'Answer'
  }
]

//Array Lists
let ArrayOne = ['test30001', 'test30002', 'test40001', 'test41002', 'test50301', 'test50401'];
let ArrayTwo = ['test50301', 'test50401', 'test40001', 'test41002', 'test30001', 'test30002'];
let ArrayThree = ['test30001', 'test40001', 'test50301', 'test50401', 'test30002', 'test41002'];

//Give images and name
function goImage(arr) {
  let x = imgList.findIndex(num => num['name'] === arr);
  document.getElementById('art' + arr).innerHTML = '<img src="' + imgList[x].file + '"><br>' + imgList[x][language + 'Name'];
}


//Change page language
function placeAll() {
  let tb = control.findIndex(lang => lang['name'] === language);

  document.getElementById('title').innerHTML = control[tb].title;
  document.getElementById('totalName').innerHTML = control[tb].ans;

  imgList.forEach(nameFile => {
    goImage(nameFile.name)
  });
}

//when select other languages
let language = 'jp';

function handleLang(myRadio) {
  language = myRadio.value;
  placeAll();
}

//amount calculations
function calculate() {
  var calValue = 0;

  countThese.each(function() {
    calValue += +$(this).val();
  })

  localStorage.setItem($(this).attr('id'), $(this).val());

  let allRate = imgList.length * 10;

  document.getElementById('totalAm').innerHTML = ((calValue / allRate) * 100).toFixed(2) + '%';
}

let countThese = $('#testBox:input').click(calculate);

//rearrange div boxes
function ArrayOne1() {
  $(ArrayOne).each(function() {
    $('#testBox').append(
      $('#testBox div#'+this)
    );
  });
/*  $('#testBox div').each(function() {
    if ($.inArray($(this).attr('id'), ArrayOne) == -1) {
      $('#testBox').append($('#' + $(this).attr('id')));
    }
  });*/
};

function ArrayTwo1() {
  $(ArrayTwo).each(function() {
    $('#testBox').append(
      $('#testBox div#'+this)
    );
  });
  /*
  $('#testBox div').each(function() {
    if ($.inArray($(this).attr('id'), ArrayTwo) == -1) {
      $('#testBox').append($('#' + $(this).attr('id')));
    }
  });*/
};

function ArrayThree1() {
  $(ArrayThree).each(function() {
    $('#testBox').append(
      $('#testBox div#'+this)
    );
  });
/*  $('#testBox div').each(function() {
    if ($.inArray($(this).attr('id'), ArrayThree) == -1) {
      $('#testBox').append($('#' + $(this).attr('id')));
    }
  });*/
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='title'></div>
<form id="calcul">
  <div class="container" id="testBox">

    <div class="tryBox" id="test30001">
      <div id="art30001" class="star3">
      </div>
      <div id="ca30001" class="calLV3">
        <select id="t30001" class="sLV3">
          <option value="0">0</option>
          <option value="0">1</option>
          <option value="0">2</option>
        </select>
      </div>
    </div>

    <div class="tryBox" id="test30002">
      <div id="art30002" class="star3">
      </div>
      <div id="ca30002" class="calLV3">
        <select id="t30002" class="sLV3">
          <option value="0">0</option>
          <option value="1">1</option>
          <option value="2">2</option>
        </select>
      </div>
    </div>

    <div class="tryBox" id="test40001">
      <div id="art40001" class="star4">
      </div>
      <div id="ca40001" class="calLV4">
        <select id="t40001" class="sLV4">
          <option value="0">0</option>
          <option value="2">2</option>
          <option value="4">4</option>
        </select>
      </div>
    </div>

    <div class="tryBox" id="test41002">
      <div id="art41002" class="star4">
      </div>
      <div id="ca41002" class="calLV4">
        <select id="t41002" class="sLV4">
          <option value="0">0</option>
          <option value="2">2</option>
          <option value="4">4</option>
        </select>
      </div>
    </div>

    <div class="tryBox" id="test50301">
      <div id="art50301" class="star5">
      </div>
      <div id="ca50301" class="calLV5">
        <select id="t50301" class="sLV5">
          <option value="0">0</option>
          <option value="1">1</option>
          <option value="3">3</option>
          <option value="5">5</option>
          <option value="7">7</option>
        </select>
      </div>
    </div>

    <div class="tryBox" id="test50401">
      <div id="art50401" class="star5">
      </div>
      <div id="ca50401" class="calLV5">
        <select id="t50401" class="sLV5">
          <option value="0">0</option>
          <option value="1">1</option>
          <option value="3">3</option>
          <option value="5">5</option>
          <option value="7">7</option>
        </select>
      </div>
    </div>

  </div>
</form>

<div id='button1'>
  <button onclick="ArrayOne1()">WAY1</button>
  <button onclick="ArrayTwo1()">WAY2</button>
  <button onclick="ArrayThree1()">WAY3</button>
</div>

<div id='lang'>
  <input type="radio" id="jp" name="lang" value="jp" onchange="handleLang(this)" checked>
  <label for="jp">日本語</label>
  <input type="radio" id="eng" name="lang" value="eng" onchange="handleLang(this)">
  <label for="eng">English</label>
</div>

<div class="answer">
  <div class="totalName" id="totalName"></div>
  <div class="totalAm" id="totalAm"></div>
</div>


<script src="script.js"></script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...