从加载的信息中计算出值

Question

我需要能够为用户进行的每个赌注显示“动态回报”，但由于某种原因，它们都不起作用。我以前曾问过这个问题，但没有运气。

我希望本文中的额外细节足以帮助最终获得答案。

我已经硬编码了其中一个脚本以便使用odds-1, stake-1etc，这有效，但其他的却没有。

如果有人能提供帮助，我们将不胜感激。

JavaScript

        var count_div = 0;
        $("div").each(function () {
            count_div++;
            console.log("Counter: " + count_div);
        });

        for (var i = 0; i < count_div; ++i) {
            $("#stake-" + i).on('keyup', function () {
                var newVal = (parseFloat($("#stake-" + i).val(), 10) * parseFloat($("#__odds-" + i).val(), 10)) + parseFloat($("#stake-" + i).val(), 10) || 0;
                $("#showdynamicreturn-" + i).val(parseFloat(newVal).toFixed(2));
            });
        }

PHP

function readbets( $link, $id, $currentpage, $loggedIn = true ) {
    $idCount = 0;
    $queryBase = "SELECT * FROM `bets` WHERE `user_id` = '%s';";
    if($loggedIn == true) {
        $queryBase2 = sprintf($queryBase, $id);
    }
    else {
        $queryBase2 = sprintf($queryBase, $id);
    }
    $selectQuery = $link->query($queryBase2);
    $return = "<div style='max-height: 680px; overflow: auto;'>";
    while($result = mysqli_fetch_array($selectQuery)) {
        $idCount++;
        if($result['odds'] == "SP") {
            $odds = "SP";
        }
        else {
            $_odds = explode("/", $result['odds']);
            $odds = $_odds[0] / $_odds[1];
        }            

        $return .= "<div style='border: 1pt solid black; width: 99%;'>";
        $return .= "<h2>" . stripslashes($result['title']) . "</h2>";
        $return .= "<form action='/' method='post'>";
        $return .= "<table class='table table-condensed'>";

        $return .= "<tr><td style='width:50%;'>Sport: </td><td>" . $result['sport'] . "</td></tr>";
        $return .= "<tr><td style='width:50%'>Participant: </td><td>" . stripslashes($result['participant']) . "</td></tr>";
        $return .= "<tr><td>Market: </td><td>" . stripslashes($result['market']) . "</td></tr>";
        $return .= "<tr><td>Time: </td><td>" . date("H:i", strtotime($result['bet_till_time'])) . "</td></tr>";
        $return .= "<tr><td>Odds: </td><td>" . $result['odds'] . "<input type='hidden' value='" . $odds . "' id='__odds-" . $idCount . "' /></td></tr>";
        $return .= "<tr><td>Stake: </td><td><div class='input-group'><span class='input-group-addon' id='basic-addon1'>&pound;</span><input style='width:100%' type='text' name='stake' id='stake-" . $idCount . "' aria-describedby='basic-addon1' placeholder='Stake' /></div></td></tr>";
        $return .= "<tr id='dynamic_return'><td colspan='10'><center><div class='input-group'><span class='input-group-addon' id='basic-addon2'>Estimated Return: &pound;</span><input style='width:100%' type='text' id='showdynamicreturn-" . $idCount . "' aria-describedby='basic-addon2' placeholder='0.00' readonly /></div></center></td></tr>";

        if($result['ew_available'] == "true") {
            $return .= "<tr><td><center><label>Each way bet?&nbsp;&nbsp;<input type='checkbox' id='eachWayChk' name='eachWayChk' /></label></center></td>" .  "<td><center><input type='submit' name='submitTo__OpenBets' value='Place Bet' /></center></td></tr>";
        }
        else {                
            $return .=  "<tr><td colspan='10'><center><input type='submit' name='submitTo__OpenBets' value='Place Bet' /></center></td></tr>";
        }

        $return .= "<!-- Hidden fields for the horses information. -->";
        $return .= "<input type='hidden' name='betslip_id' value='" . $result['bet_id'] . "' />";
        $return .= "<input type='hidden' name='sport' value='" . $currentpage . "' />";
        $return .= "<input type='hidden' name='eachWay' id='eachWay' value='' />";

        $return .= "<input type='hidden' name='odds' value='" . $result['odds'] . "' />";
        $return .= "<input type='hidden' name='ew_odds' value='" . $result['ew_odds'] . "' />";
        $return .= "<input type='hidden' name='sport' value='" . $result['sport'] . "' />";

        $return .= "<input type='hidden' name='bettilldate' value='" . $result['bettilldate'] . "' />";
        $return .= "<input type='hidden' name='bettilltime' value='" . $result['bettilltime'] . "' />";

        $return .= "<!-- Area to \"submit a delete\" and remove an item from the bet slip. -->";
        $return .= "<tr><td colspan='100%'><center><input type='submit' name='delete_betslip_item' value='Delete this bet' onclick=\"return confirm('Are you sure you want to delete this?')\" /></center></td></tr>";
        $return .= "</table>";
        $return .= "</form>";
        $return .= "</div><br>";
    }
    $return .= "</div>";
    return $return;
}

生成的 HTML

<div style='border: 1pt solid black; width: 99%; border-radius: 25pt;'>
    <h2>Cyprus v Wales - Match Betting</h2>
    <form action='/' method='post'>
        <table class='table table-condensed'>
            <tr>
                <td style='width: 50%;'>Sport: </td>
                <td>Football</td>
            </tr>
            <tr>
                <td style='width: 50%'>Participant: </td>
                <td>Cyprus</td>
            </tr>
            <tr>
                <td>Market: </td>
                <td>Euro 2016</td>
            </tr>
            <tr>
                <td>Time: </td>
                <td>19:45</td>
            </tr>
            <tr>
                <td>Odds: </td>
                <td>19/5<input type='hidden' value='3.8' id='__odds-3' /></td>
            </tr>
            <tr>
                <td>Stake: </td>
                <td>
                    <div class='input-group'><span class='input-group-addon' id='basic-addon1'>&pound;</span><input style='width: 100%' type='text' name='stake' id='stake-3' aria-describedby='basic-addon1' placeholder='Stake' /></div>
                </td>
            </tr>
            <tr id='dynamic_return'>
                <td colspan='10'>
                    <center><div class='input-group'><span class='input-group-addon' id='basic-addon2'>Estimated Return: &pound;</span><input style='width:100%' type='text' id='showdynamicreturn-4' aria-describedby='basic-addon2' placeholder='0.00' readonly /></div></center>
                </td>
            </tr>
            <tr>
                <td colspan='10'>
                    <center><input type='submit' name='submitTo__OpenBets' value='Place Bet' /></center>
                </td>
            </tr>
            <!-- Hidden fields for the horses information. -->
            <input type='hidden' name='betslip_id' value='13' /><input type='hidden' name='sport' value='' /><input type='hidden' name='eachWay' id='eachWay' value='' /><input type='hidden' name='odds' value='19/5' /><input type='hidden' name='ew_odds' value='' /><input type='hidden' name='sport' value='Football' /><input type='hidden' name='bettilldate' value='' /><input type='hidden' name='bettilltime' value='' /><!-- Area to "submit a delete" and remove an item from the bet slip. --><tr>
                <td colspan='100%'>
                    <center><input type='submit' name='delete_betslip_item' value='Delete this bet' onclick="return confirm( 'Are you sure you want to delete this?' )" /></center>
                </td>
            </tr>
        </table>
    </form>
</div>

Answer 1

好的，我明白了。我们可以使用特定于类的方法，而不是在 DOM 中添加具有特定 id 的函数。

所以将类分配给您的以下标签

<input type='hidden' value='3.8' id='__odds-3' />
<input style='width: 100%' type='text' name='stake' id='stake-3' aria-describedby='basic-addon1' placeholder='Stake' />
<input style='width:100%' type='text' id='showdynamicreturn-4' aria-describedby='basic-addon2' placeholder='0.00' readonly />

当您通过 javascript 生成此 HTML 标记时动态添加类。只需分配它。所以标签应该如下所示

<input class="odds" type='hidden' value='3.8' id='__odds-3' />
<input class="stake" style='width: 100%' type='text' name='stake' id='stake-3' aria-describedby='basic-addon1' placeholder='Stake' />
<input class="showdynamicreturn" style='width:100%' type='text' id='showdynamicreturn-4' aria-describedby='basic-addon2' placeholder='0.00' readonly />

之后我们可以使用 jquery 使用Closest 并添加一个特定于类的函数。剩下的就交给它了。

所以 javascript 代码将如下所示

$(document).ready(function() {

        $(".stake").on('keyup', function () {
            var newVal = (parseFloat($(this).val(), 10) * parseFloat($(this).closest(".table").find(".odds").val(), 10)) + parseFloat($(this).val(), 10) || 0;

            $(this).closest(".table").find(".showdynamicreturn" ).val(parseFloat(newVal).toFixed(2));
        });
});

无论您有多少表，此代码都适用于所有表，并且只会在所需的估计返回文本框上给出结果

工作小提琴在这里http://jsfiddle.net/6fgw91zx/

检查一下，如果有帮助，请告诉我

Answer 2

检查这个工作jsFiddle

修改了如下代码

$(document).ready(function() {  
            $("#stake-3").on('keyup', function () {
                var newVal = (parseFloat($("#stake-3").val(), 10) * parseFloat($("#__odds-3").val(), 10)) + parseFloat($("#stake-3").val(), 10) || 0;
                $("#showdynamicreturn-4").val(parseFloat(newVal).toFixed(2));
            });
      });

检查一下，如果有帮助请告诉我

Answer 3

最可能的问题是 idcount 和 i 不正确匹配 - 可能是因为代码中有其他 div。

您可以通过在 HTML 中包含所有相关内容（idcount）来大大简化您正在做的事情并消除出现错误的循环。

更改输出的 HTML 以在数据元素中包含“id 号”idCount，而不是通过混改 ID。例如

// replace the input element with the one below:
<input style='width: 100%' type='text' name='stake' id='stake' data-idnumber='" . $idCount . "' aria-describedby='basic-addon1' placeholder='Stake' />

然后您可以按如下方式运行您的 jQuery 选择器（没有任何循环 - 下面的一行替换了上面提供的整个代码块）

$("#stake").on('keyup', function () {
    var i = parseInt($(this).data("idnumber") , 10);
    var orginalVal = parseFloat($(this).val(), 10);        
    var newVal = orginalVal  * parseFloat($("#__odds-" + i).val(), 10)) + orginalVal || 0;
    $("#showdynamicreturn-" + i).val(parseFloat(newVal).toFixed(2));
});

注意事项：

• 还有其他方法；你可以像你所做的那样循环 div（但最好使用一个不太通用的选择器，比如“div”，例如类名），然后使用“find”来获取正确的元素来更新/处理。
• Simba 关于使用 HTMLSpecialChars 和准备好的语句（并且不依赖于条形标签）的 cmets 非常划算——如果 HTMLSpecialChars 不能正常工作的话。一旦你解决了这个问题，为了你自己的安全和理智，请关注他的 cmets，那么你的数据就会一团糟，你以后会后悔的！应该在你走得太远之前修复它，你无法修复它。准备好的陈述也是早点而不是晚点的好习惯。

Answer 4

由于您在函数内部声明了 $idCount=0，因此每次调用该函数时都会重新为其分配值 0。因此，为了使其按照我们希望在函数外部全局初始化值为 0 的 $idCount 的方式工作原型一次及以上调用“readbets”函数。它可能是这样的。 我不确定这是否是你想要做的，但我认为它是。希望这会有所帮助。

$idCount=0;
//not clear enough if its for multiple users uncomment the foreach loop
//foreach ($id as $id){
//each time the idCount incements and the value is stored for next increment.
echo readbets( $link, $id, $currentpage, $loggedIn);
//}
//below is same as your code except that i removed $idCount = 0;
function readbets( $link, $id, $currentpage, $loggedIn = true ) {
//$idCount = 0;
    $queryBase = "SELECT * FROM `bets` WHERE `user_id` = '%s';";
    if($loggedIn == true) {
        $queryBase2 = sprintf($queryBase, $id);
    }
    else {
        $queryBase2 = sprintf($queryBase, $id);
    }
    $selectQuery = $link->query($queryBase2);
    $return = "<div style='max-height: 680px; overflow: auto;'>";
    while($result = mysqli_fetch_array($selectQuery)) {
        $idCount++;
        if($result['odds'] == "SP") {
            $odds = "SP";
        }
        else {
            $_odds = explode("/", $result['odds']);
            $odds = $_odds[0] / $_odds[1];
        }            

        $return .= "<div style='border: 1pt solid black; width: 99%;'>";
        $return .= "<h2>" . stripslashes($result['title']) . "</h2>";
        $return .= "<form action='/' method='post'>";
        $return .= "<table class='table table-condensed'>";

        $return .= "<tr><td style='width:50%;'>Sport: </td><td>" . $result['sport'] . "</td></tr>";
        $return .= "<tr><td style='width:50%'>Participant: </td><td>" . stripslashes($result['participant']) . "</td></tr>";
        $return .= "<tr><td>Market: </td><td>" . stripslashes($result['market']) . "</td></tr>";
        $return .= "<tr><td>Time: </td><td>" . date("H:i", strtotime($result['bet_till_time'])) . "</td></tr>";
        $return .= "<tr><td>Odds: </td><td>" . $result['odds'] . "<input type='hidden' value='" . $odds . "' id='__odds-" . $idCount . "' /></td></tr>";
        $return .= "<tr><td>Stake: </td><td><div class='input-group'><span class='input-group-addon' id='basic-addon1'>&pound;</span><input style='width:100%' type='text' name='stake' id='stake-" . $idCount . "' aria-describedby='basic-addon1' placeholder='Stake' /></div></td></tr>";
        $return .= "<tr id='dynamic_return'><td colspan='10'><center><div class='input-group'><span class='input-group-addon' id='basic-addon2'>Estimated Return: &pound;</span><input style='width:100%' type='text' id='showdynamicreturn-" . $idCount . "' aria-describedby='basic-addon2' placeholder='0.00' readonly /></div></center></td></tr>";

        if($result['ew_available'] == "true") {
            $return .= "<tr><td><center><label>Each way bet?&nbsp;&nbsp;<input type='checkbox' id='eachWayChk' name='eachWayChk' /></label></center></td>" .  "<td><center><input type='submit' name='submitTo__OpenBets' value='Place Bet' /></center></td></tr>";
        }
        else {                
            $return .=  "<tr><td colspan='10'><center><input type='submit' name='submitTo__OpenBets' value='Place Bet' /></center></td></tr>";
        }

        $return .= "<!-- Hidden fields for the horses information. -->";
        $return .= "<input type='hidden' name='betslip_id' value='" . $result['bet_id'] . "' />";
        $return .= "<input type='hidden' name='sport' value='" . $currentpage . "' />";
        $return .= "<input type='hidden' name='eachWay' id='eachWay' value='' />";

        $return .= "<input type='hidden' name='odds' value='" . $result['odds'] . "' />";
        $return .= "<input type='hidden' name='ew_odds' value='" . $result['ew_odds'] . "' />";
        $return .= "<input type='hidden' name='sport' value='" . $result['sport'] . "' />";

        $return .= "<input type='hidden' name='bettilldate' value='" . $result['bettilldate'] . "' />";
        $return .= "<input type='hidden' name='bettilltime' value='" . $result['bettilltime'] . "' />";

        $return .= "<!-- Area to \"submit a delete\" and remove an item from the bet slip. -->";
        $return .= "<tr><td colspan='100%'><center><input type='submit' name='delete_betslip_item' value='Delete this bet' onclick=\"return confirm('Are you sure you want to delete this?')\" /></center></td></tr>";
        $return .= "</table>";
        $return .= "</form>";
        $return .= "</div><br>";
    }
    $return .= "</div>";
    return $return;
}

或者你可以简单地检查它的集合和它的值是否为 0，如果不是就让它保持原样，否则将它设置为零。虽然这样看起来很漂亮，但它每次都会检查它是否已分配。

function readbets( $link, $id, $currentpage, $loggedIn = true ) {
    //just added this if else to your code nothing else
    $idCount = isset($idCount)?$idCount:$idCount=0;
    //edit end
    $queryBase = "SELECT * FROM `bets` WHERE `user_id` = '%s';";
    if($loggedIn == true) {
        $queryBase2 = sprintf($queryBase, $id);
    }
    else {
        $queryBase2 = sprintf($queryBase, $id);
    }
    $selectQuery = $link->query($queryBase2);
    $return = "<div style='max-height: 680px; overflow: auto;'>";
    while($result = mysqli_fetch_array($selectQuery)) {
        $idCount++;
        if($result['odds'] == "SP") {
            $odds = "SP";
        }
        else {
            $_odds = explode("/", $result['odds']);
            $odds = $_odds[0] / $_odds[1];
        }            

        $return .= "<div style='border: 1pt solid black; width: 99%;'>";
        $return .= "<h2>" . stripslashes($result['title']) . "</h2>";
        $return .= "<form action='/' method='post'>";
        $return .= "<table class='table table-condensed'>";

        $return .= "<tr><td style='width:50%;'>Sport: </td><td>" . $result['sport'] . "</td></tr>";
        $return .= "<tr><td style='width:50%'>Participant: </td><td>" . stripslashes($result['participant']) . "</td></tr>";
        $return .= "<tr><td>Market: </td><td>" . stripslashes($result['market']) . "</td></tr>";
        $return .= "<tr><td>Time: </td><td>" . date("H:i", strtotime($result['bet_till_time'])) . "</td></tr>";
        $return .= "<tr><td>Odds: </td><td>" . $result['odds'] . "<input type='hidden' value='" . $odds . "' id='__odds-" . $idCount . "' /></td></tr>";
        $return .= "<tr><td>Stake: </td><td><div class='input-group'><span class='input-group-addon' id='basic-addon1'>&pound;</span><input style='width:100%' type='text' name='stake' id='stake-" . $idCount . "' aria-describedby='basic-addon1' placeholder='Stake' /></div></td></tr>";
        $return .= "<tr id='dynamic_return'><td colspan='10'><center><div class='input-group'><span class='input-group-addon' id='basic-addon2'>Estimated Return: &pound;</span><input style='width:100%' type='text' id='showdynamicreturn-" . $idCount . "' aria-describedby='basic-addon2' placeholder='0.00' readonly /></div></center></td></tr>";

        if($result['ew_available'] == "true") {
            $return .= "<tr><td><center><label>Each way bet?&nbsp;&nbsp;<input type='checkbox' id='eachWayChk' name='eachWayChk' /></label></center></td>" .  "<td><center><input type='submit' name='submitTo__OpenBets' value='Place Bet' /></center></td></tr>";
        }
        else {                
            $return .=  "<tr><td colspan='10'><center><input type='submit' name='submitTo__OpenBets' value='Place Bet' /></center></td></tr>";
        }

        $return .= "<!-- Hidden fields for the horses information. -->";
        $return .= "<input type='hidden' name='betslip_id' value='" . $result['bet_id'] . "' />";
        $return .= "<input type='hidden' name='sport' value='" . $currentpage . "' />";
        $return .= "<input type='hidden' name='eachWay' id='eachWay' value='' />";

        $return .= "<input type='hidden' name='odds' value='" . $result['odds'] . "' />";
        $return .= "<input type='hidden' name='ew_odds' value='" . $result['ew_odds'] . "' />";
        $return .= "<input type='hidden' name='sport' value='" . $result['sport'] . "' />";

        $return .= "<input type='hidden' name='bettilldate' value='" . $result['bettilldate'] . "' />";
        $return .= "<input type='hidden' name='bettilltime' value='" . $result['bettilltime'] . "' />";

        $return .= "<!-- Area to \"submit a delete\" and remove an item from the bet slip. -->";
        $return .= "<tr><td colspan='100%'><center><input type='submit' name='delete_betslip_item' value='Delete this bet' onclick=\"return confirm('Are you sure you want to delete this?')\" /></center></td></tr>";
        $return .= "</table>";
        $return .= "</form>";
        $return .= "</div><br>";
    }
    $return .= "</div>";
    return $return;
}

Answer 5

我认为问题在于您的“for”循环中变量 i 的使用。您在闭包中使用此变量 - 如果您将 alert(i) 放入 keyup 回调，它将始终为您提供 div 的总数，无论您更改了哪个值。

要解决这个问题，我建议你以更聪明的方式绑定 keyup 方法，如下所示：

        $("body").delegate('.stake', 'keyup', function () {
            var $input = $(this);
            var i = parseInt($input.attr('id').replace('stake-', ''));
            var newVal = (parseFloat($input.val(), 10) * parseFloat($("#__odds-" + i).val(), 10)) + parseFloat($input.val(), 10) || 0;
            $("#showdynamicreturn-" + i).val(parseFloat(newVal).toFixed(2));
        });

要使其正常工作，您需要在输入元素中添加“stake”类