JS - Modify the transfer function [closed]

Question

Hello, very weak in JS, need help, have a script

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>

It adds a value to the JS array when moving from the left field to the right above and also from the bottom, but there was a need to do the opposite, ie, when you click the Edit button, this array was reproduced again (for more information: During the transfer and click Add, on one page - these fields are entered into the Database, and on the other page the same fields are displayed, but the prizes inside are retrieved from the usual Database, and you need to have the "Edit" button there and they would remain in place, but they are already listed in array of transferred (or not) items).

Here is code 2 pages and about where is the actual problem:

 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">

Here is the code, when the items have already been transferred to another field, if you look at the console, as compared to the previous example, then there is no array of those items to the right, this is the main problem, you need to reproduce the arrays when you press the button

Sorry, maybe I'm an idiot, but I didn't quite understand your problem ..
If yes, then that's what the script does, I click add and the arrays of the upper and lower blocks with the items are entered into the database, and on another page, with the same CSS, they are simply displayed with the same objects but already from the database (well, the created ones ), but it is necessary that they can be changed, ie there should be a button next to it, you can also click on those items that can be moved back to the left field from the base and not lose the array of those items to the right (since I was able to implement the usual transfer replacing tags with those in the script and that's it, and the array then begins with 0)
on the page where the added items are loaded, transfer the fields from the right field to the left one, click edit and add a modified array to the database with the modified list of items already?
@Yuri nooo) well, look, we figured out that there are already 2 pages and we don’t need one (where we create the “form” isn’t needed, but where we display it).
Let's move on to the second one, the same 4 squares in the block are displayed there (as on the one where we create), only 5 times are displayed, for example (if you created 5 variants of "forms"), and in each there are different combinations of items, and imagine nothing can be done, they are as they are, but you need to change them, that is, to turn one selected form into the one on the first page, if necessary, I can throw off a website in some kind of medicine, so that I understand what I am talking about)

Yuri yuri 13.3k five 36 82 · Accepted Answer · 2016-12-24T15:02:06

You so wanted?

 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">

JS - Modify the transfer function [closed]

Closed due to the fact that the essence of the issue is incomprehensible by the participants of Grundy , Kromster , aleksandr barakin , user207618, user194374 25 Dec '16 at 6:34 .

1 answer 1

More articles: