时间戳

首页 > 解决方案 > 如何按照给定的数组重新排列带有js编写的子元素的div框？

javascript - 如何按照给定的数组重新排列带有js编写的子元素的div框？

问题描述

我正在尝试制作一个列表，其中计算所选数字的总和。实际上有 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">日本語&lt;/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>

标签： javascripthtml

解决方案

存在一些语法问题，例如=在您的对象映射声明中、ArrayOne作为函数的重新声明以及(在您的对象映射中的 a。

您正在按照 HTML 元素出现的顺序对其进行迭代，并且每次都将数组作为过滤器进行搜索。如果您希望它们按照数组指示的顺序排列，您应该按顺序遍历数组。
或者您必须在追加时考虑数组索引，并将它们插入正确的位置，这涉及更多。最简单的方法是使用 CSSflex和order: (number)

此外，ids 对于文档应该是唯一的，因此不必搜索 #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">日本語&lt;/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>

推荐阅读