Question

我正在处理一个项目，我遇到的地方，当我点击加号时，数据将隐藏，并显示在旁边的div中。这是代码：图

<fieldset class="col-md-4" >
    <legend>Services</legend>
    <div class="col-md-12" >
    <?php
        $id = 0;
        foreach ($servicesname as $val) {
        $id++;
    ?>
    <div class="col-md-12" style="font-size: 16px;" id="itemservices<?php 
echo $id ?>">
        <span style="float:left;" ><?php echo $val[0]['servicename']; ?>
</span>
        <a  style="float:right;" onclick=" addSrvToCart('itemservices<?php 
echo $id ?>')" >
            &#8377<strong> <?php echo $val[0]['amount']; ?></strong>
            <span class="glyphicon glyphicon-plus-sign" id="id_<?php echo 
$id; ?>"></span>
        </a>
    </div>

    <?php } ?>
 </div>
</fieldset>

和下一个div的代码：

<fieldset class="col-md-4" >
<legend>Cart</legend>
<div style="list-style:none;" class="no-left-padding">
    <div class="col-md-12"  id="cart" >

    </div>
</div>

<div class="col-sm-12 no-right-padding pull-right"  style="background-
color:#f3f0f0; padding-top:6px; border:1px solid#ccc">
        Total: ₨&nbsp;<label class="" id="sumAmount">0</label>
    </div>
<button style="margin-top:10px;" class="btn btn-primary btn-sm pull-right" 
onclick="bookNowAfterFilter()">Book Now</button>
</fieldset>

和脚本是

function addSrvToCart(elem){
var div=$('#' + elem);
div.hide();
$('#cart').append(div.html());
var total = parseInt(div.find('strong').html()) + 
parseInt($('#sumAmount').html());
$('#sumAmount').html(total);
}

所以问题是，我成功地能够将数据发送到下一个div，但是当将十字图标按到其原始位置并且该数据不在新div时，无法移动该div enter image description here

Answer 1

在快速查看您的问题后，我认为data属性已经消失了。

就像代码的这一部分一样，您可以将$val[0]['amount']放入data属性中。

&#8377<strong> <?php echo $val[0]['amount']; ?></strong>
<span class="glyphicon glyphicon-plus-sign" id="id_<?php echo $id; ?>"></span>

这是你应该做的。

&#8377<strong> <?php echo $val[0]['amount']; ?></strong>
<span data-amount="<?php echo $val[0]['amount']; ?>" class="glyphicon glyphicon-plus-sign" id="id_<?php echo $id; ?>"></span>

现在点击，你可以获得该数据属性，然后你可以在任何你想要的地方显示它。以下是如何获取data属性on click

的示例

$('body').on('click', '#your_plus_id', function(e) {
    var amount = $(this).data('amount');
    // Now You can use the amount variable 
});

如何将一个div的隐藏数据显示到另一个div，按下十字按钮时将其移动到实际位置

1 个答案: