Question

我有一个我正在进行的游戏，其中有一个有两个div的商店：a＆＃34; Buy＆＃34;部分和＆＃34;结帐＆＃34;。第一个允许您选择不同的项目，然后将它们移动到＆＃34; Checkout＆＃34;每行使用一个按钮。我的问题是我不确定如何将每个选定的行移动到第二个div（checkout）。

例如：

<!-- Shop Buy -->
<div id="buy">
    <h3>Purchase</h3>
    <table id="buyTable">
        <th>Level Required</th><th>Item</th><th>Cost</th>
        <tr><td>Level 1</td><td><img src="img/shop/pickaxe_rusty.png" id="item1"></td><td>50 Gold</td><td class="moveToCheckout">&#8658;</td></tr>
        <tr><td>Level 10</td><td><img src="img/shop/pickaxe_iron.png" id="item2"></td><td>500 Gold</td><td class="moveToCheckout">&#8658;</td></tr>
        <tr><td>Level 25</td><td><img src="img/shop/pickaxe_steel.png" id="item3"></td><td>5000 Gold</td><td class="moveToCheckout">&#8658;</td></tr>
    </table>
</div>

<td class="moveToCheckout">⇒</td>或⇒是用户点击以移动项目的内容。

<!-- Shop Checkout -->
<div id="checkout">
    <h3>Checkout</h3>
    <table>
        <th>Items</th><th>Quantity</th><th>Price</th>
        <tr><td><img src="" id=""></td><td><input type="text" value="1" id="quantity"><td>X Gold</td></td></tr>
    </table>
    <div id="checkoutBoxes">
        <span id="checkoutYes">&#10004;</span>
        <span id="checkoutNo">&#10008;</span>
    </div>
</div>

其他信息：我有一个数组，每个项目的所有信息（成本，级别，img src），是否可以使用它在结帐部分创建一个新行，并使用for循环插入细节？

Answer 1

我并不完全明白你想要什么，但这样的事情应该足够接近：

＆＃13;

function buy(elem) {
  $(elem).parents('tr').appendTo("#co-table");
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Shop Buy -->
<div id="buy">
  <h3>Purchase</h3>
  <table id="buyTable">
    <tr>
      <th>Level Required</th>
      <th>Item</th>
      <th>Cost</th>
    </tr>
    <tr>
      <td>Level 1</td>
      <td>
        <img src="img/shop/pickaxe_rusty.png" id="item1">
      </td>
      <td>50 Gold
        <button onclick="buy(this)">Buy</button>
      </td>
    </tr>
    <tr>
      <td>Level 10</td>
      <td>
        <img src="img/shop/pickaxe_iron.png" id="item2">
      </td>
      <td>500 Gold
        <button onclick="buy(this)">Buy</button>
      </td>
    </tr>
    <tr>
      <td>Level 25</td>
      <td>
        <img src="img/shop/pickaxe_steel.png" id="item3">
      </td>
      <td>5000 Gold
        <button onclick="buy(this)">Buy</button>
      </td>
    </tr>
  </table>
</div>

<!-- Shop Checkout -->
<div id="checkout">
  <h3>Checkout</h3>
  <table id="co-table">
    <tr>
      <th>Items</th>
      <th>Quantity</th>
      <th>Price</th>
    </tr>
    <tr>
      <td>
        <img src="" id="">
      </td>
      <td>X Gold</td>
      <td>
        <input type="text" value="1" id="quantity">
      </td>
    </tr>
  </table>
  <div id="checkoutBoxes">
    <span id="checkoutYes">&#10004;</span>
    <span id="checkoutNo">&#10008;</span>
  </div>
</div>

＆＃13;

使用＆＃34;表格＆＃34;在表格之间移动数据

1 个答案: