Question

我正在为一款名为eve的游戏设置一个挖掘计算器。

在我的计算器中，您可以从玩家列表中选择，然后从矿石列表中选择。

当您选择玩家或矿石时，在jquery中使用切换事件向玩家发出他/她已选择该项目的信号。此外，还会激活对php脚本的ajax调用，以便从数据库中添加/删除成员/ ore。

我遇到的问题是，虽然加载的挖掘操作已经加入过（已经添加了成员/矿石），但玩家/矿石的切换事件仍然设置为好像它还没有被设置选择。我已经有PHP代码，可以防止添加重复的玩家和矿石，但我希望界面向用户显示先前已经选择了一个玩家或矿石。此外，由于玩家/矿石已在之前的会话中被选中，我希望切换事件的第一个动作是用于取消选择并移除矿石的那个动作。

作为存储在db中的op的一部分的每个矿石都返回一个带有typeId的rel标记以下是播放器列表的示例：

<div class="miningMemberList">
    <div class="float" style="color: whitesmoke;">
        <input type="checkbox" class="cbox" name="option1" value="90892149" style="display: none; ">Glitch Rin
    </div>
    <div class="float" style="color: whitesmoke;">
        <input type="checkbox" class="cbox" name="option1" value="1162532926" style="display: none; ">Drake Firerain
    </div>
    <div class="spacer">
    </div>
</div>

以下是矿石清单的样本：

<div class="oreList" style="display: block; ">
    <div class="opOre" typeid="17428">
        Triclinic Bistot<img class="img_opOre" src="http://image.eveonline.com/Type/17428_32.png" alt="Triclinic Bistot">
    </div>
    <div class="opOre" typeid="17429">
        Monoclinic Bistot<img class="img_opOre" src="http://image.eveonline.com/Type/17429_32.png" alt="Monoclinic Bistot">
    </div>
    <div class="opOre" typeid="1227" style="background-color: rgb(57, 57, 57); color: rgb(245, 245, 245); ">
        Omber<img class="img_opOre" src="http://image.eveonline.com/Type/1227_32.png" alt="Omber">
    </div>
</div>

以下是ajax调用返回数据的示例。

<div id="opTableContainer">
    <from>
    <table border="1" id="returnTable">
    <thead>
    <tr>
        <th>
            Name
        </th>
        <th display="true" rel="17428">
            <img class="img_opOre" src="http://image.eveonline.com/Type/17428_32.png" alt="Triclinic Bistot">Triclinic Bistot
        </th>
        <th display="true" rel="17429">
            <img class="img_opOre" src="http://image.eveonline.com/Type/17429_32.png" alt="Monoclinic Bistot">Monoclinic Bistot
        </th>
        <th display="true" rel="1227">
            <img class="img_opOre" src="http://image.eveonline.com/Type/1227_32.png" alt="Omber">Omber
        </th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>
            <img src="images/redXblackBackground.png" style="float: left;">Player 1
        </td>
        <td rel="17428">
            <input type="text" style="width:100px" name="17428">
        </td>
        <td rel="17429">
            <input type="text" style="width:100px" name="17429">
        </td>
        <td rel="1227">
            <input type="text" style="width:100px" name="1227">
        </td>
    </tr>
    <tr>
        <td>
            <img src="images/redXblackBackground.png" style="float: left;">Player 2
        </td>
        <td rel="17428">
            <input type="text" style="width:100px" name="17428">
        </td>
        <td rel="17429">
            <input type="text" style="width:100px" name="17429">
        </td>
        <td rel="1227">
            <input type="text" style="width:100px" name="1227">
        </td>
    </tr>
    </tbody>
    </table>
    <div class="spacer">
    </div>
    <input type="button" value="Submit"></from>
</div>

以下是针对矿石的切换事件的javascript的示例。玩家的切换事件几乎相同。

$(".opOre").toggle(function(){
        $(this).css('background-color','#393939');
        $(this).css('color','whitesmoke');
        var urlQuery = location.search;
    urlQuery = urlQuery.replace('?', '');
    var getVariable = urlQuery.split('=');
    typeId = $(this).attr('typeid');
    //split[0] is your var name, and split[1]
    /* ADD ORE TO OP TO DB */
    $.ajax({        
        type: "POST",
        url: "thePHPManagementScript.php",
        data: { action : 'addOre', opId : getVariable[1], typeId : typeId },
        success: function(data) {
            $("#opTableContainer").empty();
            $("#opTableContainer").append(data); 
            var bodyRows = $("#returnTable tbody tr");
            bodyRows.each(function(){
                var firstCell = $(this).find('td').eq(0).text();
                console.log(firstCell);
                $("#opSelectBox option").filter(function() { 
                    return this.text == firstCell; 
                }).remove();
            });
        }
        });
    },function(){
        $(this).css('background-color','black');
        var urlQuery = location.search;
    urlQuery = urlQuery.replace('?', '');
    var getVariable = urlQuery.split('=');
    typeId = $(this).attr('typeid');
    /* REMOVE ORE FROM OP FROM DB */
    $.ajax({        
        type: "POST",
        url: "thePHPManagementScript.php",
        data: { action : 'removeOre', opId : getVariable[1], typeId : typeId },
        success: function(data) {
            $("#opTableContainer").empty();
            $("#opTableContainer").append(data); 
            var bodyRows = $("#returnTable tbody tr");
            bodyRows.each(function(){
                var firstCell = $(this).find('td').eq(0).text();
                console.log(firstCell);
                $("#opSelectBox option").filter(function() { 
                    return this.text == firstCell; 
                }).remove();
            });
        }
    });
});

运气好的话，我以一种可以理解的方式提出这个问题。

我知道我所做的事情可能要在成功中完成：ajax请求的一部分，我只是不知道如何解决这个问题。

Answer 1

您是否有链接我可以查看问题，根据描述进行心理可视化会有一些麻烦。我在过去遇到了动态加载内容的问题，可能就像在切换中添加.live（）一样简单，以便它可以处理加载的内容。

如何在ajax调用后设置jquery切换位置

1 个答案: