Question

HTML：

<html>
    <head>
        <title>test</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script type="text/javascript" src="test.js"></script>
        <style type="text/css">
            .green {
                color: #0C0;
            }
            .red {
                color: #F00
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="main">
                <form method="post" action="post.php">
                    <input type="submit" value="OK" />
                    <div class="content">
                        <input type="checkbox" name="data" id="data1" value="1" />
                        <label for="data1">Data 1</label>
                    </div>
                    <div class="content">
                        <input type="checkbox" name="data" id="data2" value="2" />
                        <label for="data2">Data 2</label>
                    </div>
                    <div class="content">
                        <input type="checkbox" name="data" id="data3" value="3" />
                        <label for="data3">Data 3</label>
                    </div>
                    <div class="content">
                        <input type="checkbox" name="data" id="data4" value="4" />
                        <label for="data4">Data 4</label>
                    </div>
                    <div class="content">
                        <input type="checkbox" name="data" id="data5" value="5" />
                        <label for="data5">Data 5</label>
                    </div>
                    <div class="content">
                        <input type="checkbox" name="data" id="data6" value="6" />
                        <label for="data6">Data 6</label>
                    </div>
                    <div class="content">
                        <input type="checkbox" name="data" id="data7" value="7" />
                        <label for="data7">Data 7</label>
                    </div>
                    <div class="content">
                        <input type="checkbox" name="data" id="data8" value="8" />
                        <label for="data8">Data 8</label>
                    </div>
                    <div class="content">
                        <input type="checkbox" name="data" id="data9" value="9" />
                        <label for="data9">Data 9</label>
                    </div>
                    <div class="content">
                        <input type="checkbox" name="data" id="data10" value="10" />
                        <label for="data10">Data 10</label>
                    </div>
                </form>
            </div>
        </div>
    </body>
</html>

test.js：

$(document).ready(function() {
    $("#container #main form").submit(function(e) {
        e.preventDefault();
        $(this).find(".content").each(function() {
            $_this = $(this);
            if ($(this).find("input[name=data]").is(":checked")) {
                $data = $(this).find("input[name=data]").val();
                $.ajax({
                    url: "post.php",
                    type: "POST",
                    data: { data: $data },
                    success: function(data) {
                        if (data = true) {
                            $_this.addClass("green");
                        } else {
                            $_this.addClass("red");
                        }
                    }
                });
            }
        });
    });
});

post.php中

<?php
if (isset($_POST["data"])) return true;
else return false;
?>

http://jsfiddle.net/8yQv4/

当我点击提交按钮时，如果服务器返回结果“成功”，则元素包含addClass（“green”）。相反，它将addClass（“red”）

请帮帮我......谢谢！

jquery在每个元素中选择

0 个答案: