JS - Доработать функцию переноса [требует правки]

344

25 декабря 2016, 22:02

Здравствуйте, очень слаб в JS, нужна помощь, есть скрипт

var useritems = []; 
var botitems = []; 
 
function addTrade(items, dest) { 
  if (items.length < 10) { 
    items.push($(this).attr('data-id')); 
    $(this).appendTo(dest); 
  } 
} 
 
function removetrade(items, dest) { 
  items.splice(items.indexOf($(this).attr('data-id')), 1); 
  $(this).appendTo(dest); 
} 
 
function addRemoveInit(items, src, dest) { 
  $(src).on('click', '.item', function() { 
    addTrade.call(this, items, dest); 
  }); 
  $(dest).on('click', '.item', function() { 
    removetrade.call(this, items, src); 
  }); 
} 
addRemoveInit(useritems, '.inventoryload', '.tradehave'); 
addRemoveInit(botitems, '.botinventoryload', '.tradewant'); 
 
function tradesend() { 
  if (useritems.length > 0) { 
    var data_post = reduceItems(botitems, 'h', reduceItems(useritems, 'w', {})); 
    console.log(data_post); 
  } 
} 
 
function reduceItems(items, prefix, start) { 
  return items.reduce(function(acc, el, index) { 
    acc[prefix + (index + 1)] = el; 
    return acc; 
  }, start); 
}

.inventoryload { 
  background: yellow; 
  border: 1px solid; 
  height: 100px; 
  width: 100px; 
} 
.botinventoryload { 
  background: yellow; 
  border: 1px solid; 
  height: 100px; 
  width: 100px; 
} 
.tradewant { 
  background: orange; 
  border: 1px solid; 
  height: 100px; 
  width: 100px; 
} 
.tradehave { 
  background: orange; 
  border: 1px solid; 
  height: 100px; 
  width: 100px; 
} 
.inv { 
  float: left; 
} 
.trade { 
  float: left; 
} 
.item { 
  background: white; 
  border: 1px solid; 
  height: 20px; 
  width: 40px; 
  margin: 2px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="inv"> 
  <div class="inventoryload"> 
    <p class="item" data-id="1111">1111</p> 
    <p class="item" data-id="1251">1251</p> 
    <p class="item" data-id="4444">4444</p> 
  </div> 
  <div class="botinventoryload"> 
    <p class="item" data-id="3251">3251</p> 
    <p class="item" data-id="8018">8018</p> 
    <p class="item" data-id="6543">6543</p> 
  </div> 
</div> 
<div class="trade"> 
  <div class="tradehave"> 
  </div> 
  <div class="tradewant"> 
  </div> 
</div> 
<button onClick="tradesend();" id="button">Обменять</button>

Он добавляет в массив JS значение при переносе из левого поля в правое сверху и так же снизу, но появилась потребность делать обратное, тоесть при нажатии кнопки "Изменить", этот массив снова воспроизводился (подробнее: При переносе и нажатии "Добавить" на одной странице- эти поля заносятся в Базу Данных, а на другой странице отображаются те же поля, но преметы внутри достаются из обычной Базы Данных, а нужно, что бы там была кнопка "Изменить" и они бы оставались на местах, но при этом уже занесены в массив перенесенных (или нет) предметов).

Вот код 2 страницы и о где собственно проблема:

var useritems = []; 
var botitems = []; 
 
function addTrade(items, dest) { 
  if (items.length < 10) { 
    items.push($(this).attr('data-id')); 
    $(this).appendTo(dest); 
  } 
} 
 
function removetrade(items, dest) { 
  items.splice(items.indexOf($(this).attr('data-id')), 1); 
  $(this).appendTo(dest); 
} 
 
function addRemoveInit(items, src, dest) { 
  $(src).on('click', '.item', function() { 
    addTrade.call(this, items, dest); 
  }); 
  $(dest).on('click', '.item', function() { 
    removetrade.call(this, items, src); 
  }); 
} 
addRemoveInit(useritems, '.inventoryload', '.tradehave'); 
addRemoveInit(botitems, '.botinventoryload', '.tradewant'); 
 
function tradesend() { 
  if (useritems.length > 0) { 
    var data_post = reduceItems(botitems, 'h', reduceItems(useritems, 'w', {})); 
    console.log(data_post); 
  } 
} 
 
function reduceItems(items, prefix, start) { 
  return items.reduce(function(acc, el, index) { 
    acc[prefix + (index + 1)] = el; 
    return acc; 
  }, start); 
}

.inventoryload { 
  background: yellow; 
  border: 1px solid; 
  height: 100px; 
  width: 100px; 
} 
.botinventoryload { 
  background: yellow; 
  border: 1px solid; 
  height: 100px; 
  width: 100px; 
} 
.tradewant { 
  background: orange; 
  border: 1px solid; 
  height: 100px; 
  width: 100px; 
} 
.tradehave { 
  background: orange; 
  border: 1px solid; 
  height: 100px; 
  width: 100px; 
} 
.inv { 
  float: left; 
} 
.trade { 
  float: left; 
} 
.item { 
  background: white; 
  border: 1px solid; 
  height: 20px; 
  width: 40px; 
  margin: 2px; 
} 
    </style> 
    <script src="/scripts/snippet-javascript-console.min.js?v=1"></script><style type="text/css">.as-console-wrapper { position: fixed; bottom: 0; left: 0; right: 0; max-height: 150px; overflow-y: scroll; overflow-x: hidden; border-top: 1px solid #000; display: none; } 
.as-console { background: #e9e9e9; border: 1px solid #ccc; display: table; width: 100%; border-collapse: collapse; } 
.as-console-row { display: table-row; font-family: monospace; font-size: 13px; } 
.as-console-row:after { display: table-cell; padding: 3px 6px; color: rgba(0,0,0,.35); border: 1px solid #ccc; content: attr(data-date); vertical-align: top; } 
.as-console-row + .as-console-row > * { border: 1px solid #ccc; } 
.as-console-row-code { width: 100%; white-space: pre-wrap; padding: 3px 5px; display: table-cell; font-family: monospace; font-size: 13px; vertical-align: middle; } 
.as-console-error:before { content: 'Error: '; color: #f00; } 
.as-console-assert:before { content: 'Assertion failed: '; color: #f00; } 
.as-console-info:before { content: 'Info: '; color: #00f; } 
.as-console-warning:before { content: 'Warning: '; color: #e90 } 
@-webkit-keyframes flash { 0% { background: rgba(255,240,0,.25); } 100% { background: none; } } 
@-moz-keyframes flash { 0% { background: rgba(255,240,0,.25); } 100% { background: none; } } 
@-ms-keyframes flash { 0% { background: rgba(255,240,0,.25); } 100% { background: none; } } 
@keyframes flash { 0% { background: rgba(255,240,0,.25); } 100% { background: none; } } 
.as-console-row-code, .as-console-row:after { -webkit-animation: flash 1s; -moz-animation: flash 1s; -ms-animation: flash 1s; animation: flash 1s; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="inv"> 
  <div class="inventoryload"></div> 
  <div class="botinventoryload"></div> 
</div> 
<div class="trade"> 
  <div class="tradehave"> 
  <p class="item" data-id="1111">1111</p></div> 
  <div class="tradewant"> 
  <p class="item" data-id="3251">3251</p><p class="item" data-id="8018">8018</p></div></div> 
<button onclick="tradesend();" id="button">Изменить</button> 
<div class="as-console-wrapper"><div class="as-console">

Вот код, когда уже итемы перенесены в другое поле, если посмотреть в консоль, по сравнению с прошлым примером, то там нет массива тех итемов что справа, вот в этом главная проблема, нужно чтобы при нажатии кнопки массивы как-то воспроизводились

Answer 1

Вы так хотели?

var useritems = []; 
var botitems = []; 
 
$(function() { 
  for(var i = 0; i < $('.tradehave').find('.item').length; i++){ 
     useritems.push($('.tradehave').find('.item').eq(i).attr('data-id')); 
  }; 
  for(var i = 0; i < $('.tradewant').find('.item').length; i++){ 
    botitems.push($('.tradewant').find('.item').eq(i).attr('data-id')); 
  }; 
}); 
 
function addTrade(items, dest) { 
  if (items.length < 10) { 
    items.push($(this).attr('data-id')); 
    $(this).appendTo(dest); 
  } 
} 
 
function removetrade(items, dest) { 
  items.splice(items.indexOf($(this).attr('data-id')), 1); 
  $(this).appendTo(dest); 
} 
 
function addRemoveInit(items, src, dest) { 
  $(src).on('click', '.item', function() { 
    addTrade.call(this, items, dest); 
  }); 
  $(dest).on('click', '.item', function() { 
    removetrade.call(this, items, src); 
  }); 
} 
addRemoveInit(useritems, '.inventoryload', '.tradehave'); 
addRemoveInit(botitems, '.botinventoryload', '.tradewant'); 
 
function tradesend() { 
  if (useritems.length > 0) { 
    var data_post = reduceItems(botitems, 'h', reduceItems(useritems, 'w', {})); 
    console.log(data_post); 
  } 
} 
 
function reduceItems(items, prefix, start) { 
  return items.reduce(function(acc, el, index) { 
    acc[prefix + (index + 1)] = el; 
    return acc; 
  }, start); 
}

.inventoryload { 
  background: yellow; 
  border: 1px solid; 
  height: 100px; 
  width: 100px; 
} 
.botinventoryload { 
  background: yellow; 
  border: 1px solid; 
  height: 100px; 
  width: 100px; 
} 
.tradewant { 
  background: orange; 
  border: 1px solid; 
  height: 100px; 
  width: 100px; 
} 
.tradehave { 
  background: orange; 
  border: 1px solid; 
  height: 100px; 
  width: 100px; 
} 
.inv { 
  float: left; 
} 
.trade { 
  float: left; 
} 
.item { 
  background: white; 
  border: 1px solid; 
  height: 20px; 
  width: 40px; 
  margin: 2px; 
} 
    </style> 
    <script src="/scripts/snippet-javascript-console.min.js?v=1"></script><style type="text/css">.as-console-wrapper { position: fixed; bottom: 0; left: 0; right: 0; max-height: 150px; overflow-y: scroll; overflow-x: hidden; border-top: 1px solid #000; display: none; } 
.as-console { background: #e9e9e9; border: 1px solid #ccc; display: table; width: 100%; border-collapse: collapse; } 
.as-console-row { display: table-row; font-family: monospace; font-size: 13px; } 
.as-console-row:after { display: table-cell; padding: 3px 6px; color: rgba(0,0,0,.35); border: 1px solid #ccc; content: attr(data-date); vertical-align: top; } 
.as-console-row + .as-console-row > * { border: 1px solid #ccc; } 
.as-console-row-code { width: 100%; white-space: pre-wrap; padding: 3px 5px; display: table-cell; font-family: monospace; font-size: 13px; vertical-align: middle; } 
.as-console-error:before { content: 'Error: '; color: #f00; } 
.as-console-assert:before { content: 'Assertion failed: '; color: #f00; } 
.as-console-info:before { content: 'Info: '; color: #00f; } 
.as-console-warning:before { content: 'Warning: '; color: #e90 } 
@-webkit-keyframes flash { 0% { background: rgba(255,240,0,.25); } 100% { background: none; } } 
@-moz-keyframes flash { 0% { background: rgba(255,240,0,.25); } 100% { background: none; } } 
@-ms-keyframes flash { 0% { background: rgba(255,240,0,.25); } 100% { background: none; } } 
@keyframes flash { 0% { background: rgba(255,240,0,.25); } 100% { background: none; } } 
.as-console-row-code, .as-console-row:after { -webkit-animation: flash 1s; -moz-animation: flash 1s; -ms-animation: flash 1s; animation: flash 1s; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="inv"> 
  <div class="inventoryload"></div> 
  <div class="botinventoryload"></div> 
</div> 
<div class="trade"> 
  <div class="tradehave"> 
  <p class="item" data-id="1111">1111</p> 
  </div> 
  <div class="tradewant"> 
  <p class="item" data-id="3251">3251</p><p class="item" data-id="8018">8018</p> 
  </div> 
</div> 
<button onclick="tradesend();" id="button">Изменить</button> 
<div class="as-console-wrapper"><div class="as-console">