Question

我已经经历了很多类似的问题，但它们都不适合我的问题。

我在onclick事件后调用一个函数到我的锚标签，然后在单击锚标签之后，该函数将一行新行添加到网页中的另一个部分。

我想要做的是在用户再次点击相同的锚标记时恢复该过程。换句话说，如果再次单击，则应从视图中删除新添加的行。

这是我的代码，点击我调用一个函数添加新行

function drawSelections(betTypeId, tableId, selections) {
    var whiteLegendTrId = tableId + '_whiteLegendTr';

    $.each(selections, function(i, v){

        var selectionRowId = tableId + '_' + v.id;

        document.getElementById(tableId).appendChild(createTr(selectionRowId,null,"white"));

        $('#' + whiteLegendTrId).find('td').each(function() {
            var tdId = $(this).attr('id');
            if (tdId == "pic") {document.getElementById(selectionRowId).appendChild(createTd(null, null, null, "",null))}
            else if (tdId == "no") {document.getElementById(selectionRowId).appendChild(createTd(null, null, null, v.position,null))}
            else if (tdId == "horseName" || tdId == "jockey") {document.getElementById(selectionRowId).appendChild(createTd(null, null, null, v.name,null))}

            // Horse prices
            else {
                var priceNotFound = true;
                $.each(v.prices, function(index,value) {
                    if (value.betTypeId == betTypeId && (value.productId == tdId || value.betTypeId == tdId)) {
                        priceNotFound = false;

                        var td = createTd(null, null, null, "", null),
                            a = document.createElement('a');
                        a.innerHTML = value.value.toFixed(2);

                        // adding new rows after onclick to anchore tag
                        (function(i, index){
                            a.onclick=function() {
                                var betInfo = createMapForBet(selections[i],index);
                                $(this).toggleClass("highlight");
                                increaseBetSlipCount();
                                addToSingleBetSlip(betInfo);
                            }
                        })(i,index)

                        td.appendChild(a);
                        document.getElementById(selectionRowId).appendChild(td);
                    }
                });
                if (priceNotFound) document.getElementById(selectionRowId).appendChild(createTd(null, null, null, '-',null));
            };
        });
    });
}

添加新行

function addToSingleBetSlip(betInfo) {
    // Show bet slip
    $('.betslip_details.gray').show();
    // Make Single tab active
    selectSingleBetSlip();

    // Create div for the bet
    var div = createSingleBetDiv(betInfo);
    $("#bets").append(div);

    // Increase single bet counter
    updateBetSinglesCounter();

}

这是JS代码，我在第一个函数中单击锚标记后为我添加的动态行生成视图

function createSingleBetDiv(betInfo) {
    var id = betInfo.betType + '_' + betInfo.productId + '_' + betInfo.mpid,
        div = createDiv(id + '_div', 'singleBet', 'bet gray2'),
        a =  createA(null, null, null, 'right orange'),
        leftDiv = createDiv(null, null, 'left'),
        closeDiv = createDiv(null, null, 'icon_shut_bet'),
        singleBetNumber = ++document.getElementsByName('singleBet').length;

    // Info abt the bet
    $(leftDiv).append('<p class="title"><b><span class="bet_no">' + singleBetNumber + '</span>.&nbsp;' + betInfo['horseName'] + '</b></p>');
    var raceInfo = "";
    $("#raceInfo").contents().filter(function () {
        if (this.nodeType === 3) raceInfo = $(this).text() + ',&nbsp;' + betInfo['betTypeName'] + ' (' + betInfo['value'].toFixed(2) + ')';
    });
    $(leftDiv).append('<p class="title">' + raceInfo + '</p>');

    // Closing btn
    (function(id) {
        a.onclick=function() {
            removeSingleBet(id + '_div');
        };
    })(id);
    $(a).append(closeDiv);

    // Creating input field
    $(leftDiv).append('<p class="supermid"><input id="' + id + '_input\" type="text"></p>');

    // Creating WIN / PLACE checkbox selection
    $(leftDiv).append('<p><input id="' + id + '_checkbox\" type="checkbox"><b>' + winPlace + '</b></p>');

    // Append left part
    $(div).append(leftDiv);
    // Append right part
    $(div).append(a);
    // Appending div with data
    $.data(div, 'mapForBet', betInfo);

    return div;
}

删除单个行的功能

function removeSingleBet(id) {

    // Remove the div
    removeElement(id);

    // Decrease the betslip counter
    decreaseBetSlipCount();

    // Decrease bet singles counter
    updateBetSinglesCounter();
}

function removeElement(id) {
    var element = document.getElementById(id);
    element.parentNode.removeChild(element);
}

Answer 1

这不是最优雅的解决方案，但它应该让你开始。

我尝试将其保留为与您的代码相同的格式：

http://jsfiddle.net/L5wmz/

ul{
    min-height: 100px;
    width: 250px; 
    border: 1px solid lightGrey;
}

<ul id="bets">
    <li id="bet_one">one</li>
    <li id="bet_two">two</li>
</ul>

$(document).ready(function(){
    var bets   =    $("#bets li");
    var slips  =    $("#slips");

    bets.bind("click", function(){
        var that = $(this);

        try{
            that.data("slipData");
        }catch(err){
            that.data("slipData",null);
        }

        if(that.data("slipData") == null){
            var slip = createSlip({slipdata:"data"+that.attr("id")});
            slip.bind("click", function(){
                that.data("slipData",null);
                $(this).remove()
            });
            that.data("slipData",slip);
            slips.append(slip);
        }
        else{
            slips.find(that.data("slipData")).remove();
            that.data("slipData",null);
        }
        console.log(that.data("slipData"));
    });
});

function createSlip(data){
    var item = $(document.createElement("li")).append("slip: "+data.slipdata);
    return item;
}

删除单击jquery上的函数

1 个答案: