Question

表从mysql加载其条目。当用户单击按钮时，它会创建一个新的表行作为带有选项的下拉菜单。用户可以选择他们想要的选项并将其选择添加到购物车并将图像更改为“mp32.png”，“wav2.png”或“track2.png”，具体取决于他们选择的选项，如果他们点击了mp3 ，wav或再次跟踪按钮，它会将图像更改回其原始状态并删除该项目。当再次点击下拉按钮时，它将通过删除表格行来关闭下拉菜单。但是，如果用户重新按下下拉按钮再次显示选项，则会将图像重置为原始状态并忘记将它们添加到购物车中。理想的目标是，一旦选择了一个项目，即使删除了表格行，也会在某处记住attr（）和data（），如果再次创建表格行，它仍会显示“mp32.png”，“ wav2.png“，”track2.png“并记住数据。以下是我到目前为止的情况：

PHP表：

<?php
while($sound=mysql_fetch_assoc($records)){
    echo "<tr class='adder'>";
    echo "<td width='40' class='player'>&nbsp;&nbsp;<a href='beats/".$sound['downloadlink']."' class='sm2_button'>Play/</a></td>";
    echo '<td width="250" class="name">'.$sound['name'].'&nbsp;&nbsp;&nbsp;<span class="red date">'.$sound['date'].'</span></td>';
    echo "<td width='88' class='bpm'>".$sound['bpm']." B.P.M.</td>";
    echo "<td width='72' class='length'>".$sound['length']."</td>";
    echo "<td width='275' class='keywords'>".$sound['keywords']."</td>";
    echo "<td width='96' class='buy'><img class='button' src='buy.png' data-link='".$sound["downloadlink"]."' data-wavlink='".$sound["wavlink"]."' data-tracklink='".$sound["tracklink"]."'/>";
    echo "</tr>";
    }
?>

JQuery的：

$('.button').on('click', function () {
    var thisRow = $(this).parents('tr.adder');
    var hasNextRow = thisRow.next('tr.added').length;
    if (hasNextRow) {
        thisRow.next('tr.added').remove();
    } else {
        $(this).parents('tr.adder').after(
            '<tr class="added"><td height="100" colspan="2" ><img class="mp3buy" data-product-id="'
            + $(this).data('link')
            + '" src="mp31.png"/></td><td height="100" colspan="2" ><img class="wavbuy" data-product-id="'
            + $(this).data('wavlink')
            + '" src="wav1.png"/></td><td height="100" colspan="2" ><img class="trackbuy" data-product-id="'
            + $(this).data('tracklink')
            + '" src="track1.png"/></td></tr>'
        );
    }
});

$('#mytable').on('click', ".mp3buy", function () {
    var flag = $(this).data('flag');
    simpleCart.add({
        name     : $(this).data("product-id"),
        price    : .99,
        quantity : (flag ? -1 : 1)
    });
    $(this).attr("src", flag ? "mp31.png" : "mp32.png");
    $(this).data('flag', !flag);
});
$('#mytable').on('click', ".wavbuy", function () {
    var flag = $(this).data('flag');
    simpleCart.add({
        name     : $(this).data("product-id"),
        price    : 1.99,
        quantity : (flag ? -1 : 1)
    });
    $(this).attr("src", flag ? "wav1.png" : "wav2.png");
    $(this).data('flag', !flag);
});
$('#mytable').on('click', ".trackbuy", function () {
    var flag = $(this).data('flag');
    simpleCart.add({
        name     : $(this).data("product-id"),
        price    : 4.99,
        quantity : (flag ? -1 : 1)
    });
    $(this).attr("src", flag ? "track1.png" : "track2.png");
    $(this).data('flag', !flag);
});

$(".empty").on('click', function(){

    $(".mp3buy").attr("src", "mp31.png");

    $(".mp3buy").removeData();
});

$(".empty").on('click', function(){

    $(".wavbuy").attr("src", "wav1.png");

    $(".wavbuy").removeData();
});

$(".empty").on('click', function(){

    $(".trackbuy").attr("src", "track1.png");

    $(".trackbuy").removeData();

});

Answer 1

为什么不简单地隐藏它们，而不是删除表格行？然后您可以保留数据，但该行将无法被用户访问。您可以使用$.hide()或添加将display: none;设置为元素的类。

Answer 2

感谢Benjarwar的想法，我创建了一个工作解决方案，在创建行之后在隐藏和显示之间切换：

$('.button').on('click', function () {
    var thisRow = $(this).parents('tr.adder');
    var hasNextRow = thisRow.next('tr.added').length;
    if (hasNextRow) {
        thisRow.next('tr.added').toggle('display', function(i,v){return v=='none' ? 'inline' : 'none' });
    } else {
        $(this).parents('tr.adder').after(
            '<tr class="added"><td height="100" colspan="2" ><img class="mp3buy" data-product-id="'
            + $(this).data('link')
            + '" src="mp31.png"/></td><td height="100" colspan="2" ><img class="wavbuy" data-product-id="'
            + $(this).data('wavlink')
            + '" src="wav1.png"/></td><td height="100" colspan="2" ><img class="trackbuy" data-product-id="'
            + $(this).data('tracklink')
            + '" src="track1.png"/></td></tr>'
        );
    }
});

谢谢你！

让Jquery记住attr（）和数据

2 个答案: