Question

我有这样的代码，

<head runat="server">
    <title>Sidebar</title>
    <link href="css/style.css" rel="stylesheet" />
    <script src="scripts/jquery-1.11.1.min.js"></script>
    <script src="scripts/main.js"></script>
</head>
<body>
    <i class="open-icon" data-open="false"></i>
    <div class="contact-form-ch">
    </div>

    <div class="container">
        <div class="content-1"></div>
    </div>

    <script>
        $(".open-icon").on("click", function () {
            var statu = $(this).data("open");

            if (statu) {
                $(".contact-form-ch").animate({ "width": "700px" });
                $("body").animate({ "margin": "0" });
                $(this).removeAttr("data-open").attr("data-open", false);
            } else {
                $(".contact-form-ch").animate({ "width": "700px" });
                $("body").animate({ "margin": "0 -350px 0 350px" });
                $(this).removeAttr("data-open").attr("data-open", true);
            }

        });

    </script>
</body>

当我运行第一个这个项目时。此代码返回 false

var statu = $(this).data("open");

没关系，因为，data-open="false"

但是当我点击<i class="open-icon" data-open="false"></i>数据时，open会被替换为 true 所以，<i class="open-icon" data-open="true"></i>

但var statu仍然始终返回 false 。但它必须在运行时 true 。我该如何解决这个问题？

Answer 1

您只需使用.data()

即可

 $(this).data("open", true/false); //Set value using data

而不是

 $(this).removeAttr("data-open").attr("data-open", true/false)

为您好好阅读：jQuery Data vs Attr?

Answer 2

试试这个：

$(".open-icon").on("click", function () {
            var statu = $(this).data("open");

            if (statu) {
                $(".contact-form-ch").animate({ "width": "700px" });
                $("body").animate({ "margin": "0" });
                $(this).data("open", false);
            } else {
                $(".contact-form-ch").animate({ "width": "700px" });
                $("body").animate({ "margin": "0 -350px 0 350px" });
                $(this).data("open", true);
            }

        });

JSFiddle

Jquery Live DataAttribute

2 个答案: