为什么使用按钮或Div运行查询会返回不一致的结果?

Why does a query run using either a button or a Div return inconsistent results?

本文关键字：返回 不一致 结果 查询 运行 按钮 Div 为什么      更新时间：2023-09-26

使用JS/JQuery。

我想让用户做的是单击显示在页面上的名称，并复制相同的操作，如果用户单击"查找"按钮会发生什么。基本上是将相关结果返回到页面。

示例页面在这里，http://www.kudosoo.com/friendslist.html因此，例如，用户单击"dave"，结果与他们在文本框中输入"dave"并单击"find"

相同

当点击为什么<div id="container"></div>不返回相同的结果点击"查找"按钮，他们都使用相同的查询"friendFeed"

也许是字符串存储方式的问题?

<!doctype html>
<!-- Runs Parse and FB code that uses Facebook authentication to login user to the site and redirects them to the main content area. This page is fired from the Facebook button being clicked on the site landing page-->

<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="fresh Gray Bootstrap 3.0 Responsive Theme " />
    <meta name="keywords" content="Template, Theme, web, html5, css3, Bootstrap,Bootstrap 3.0 Responsive Login" />
    <meta name="author" content="Adsays" />
    <title>Parse JavaScript Todo App</title>

    <script src="http://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
    <script type="text/javascript" src="http://www.parsecdn.com/js/parse-1.2.17.min.js"></script>


</head>
<body>

    <!-- Initialize the Parse object-->

    <script type="text/javascript">
        Parse.initialize("79tphN5KrDXdjJnAmehgBHgOjgE2dLGTvEPR9pEJ", "9lblofQNZlypAtveU4i4IzEpaOqtBgMcmuU1AE6Y");
         // capture name of user thats been clicked
         // return their activty feed of badges etc
        var currentUser = Parse.User.current();
        var FriendRequest = Parse.Object.extend("FriendRequest");
        var query = new Parse.Query(FriendRequest);
        query.include('toUser');
         // query.include('fromUser');
         //query.include('pic');
        query.equalTo("fromUser", currentUser);
        query.equalTo("status", "Request sent");
        query.find({
            success: function (results) {
                // If the query is successful, store each image URL in an array of image URL's
                imageURLs = [];
                Username = [];
                for (var i = 0; i < results.length; i++) {
                    var object = results[i].get("toUser");
                    imageURLs.push(object.get("pic"));
                    Username.push(object.get("username"));
                }

                // If the imageURLs array has items in it, set the src of an IMG element to the first URL in the array
                console.log(imageURLs);
                console.log(Username);
                for (var j = 0; j < imageURLs.length; j++) {
                    $('#container').append("<img class='images' src='" + imageURLs[j] + "'/>");
                    $('#container').append("<div class='username'>'" + Username[j] + "'</div>");
                }
            },
            error: function (error) {
                // If the query is unsuccessful, report any errors
                alert("Error: " + error.code + " " + error.message);
            }
        });

        var currentUser = Parse.User.current();
        var myBadges = Parse.Object.extend("myBadges");

         // Captures the input from the user and checks if the name already exists within the Db.
        function friendFeed(name) {
            var friendName = name || $('#friendsearch').val();
            console.log(friendName);
            var query = new Parse.Query(myBadges).matchesQuery("uploadedBy", new Parse.Query("_User").equalTo("username", friendName));
            query.find({
                success: function (rules) {
                    imageURLs = [];
                    for (var i = 0; i < rules.length; i++) {
                        var object = rules[i];
                        imageURLs.push(object.get("BadgeName"));
                        Username.push(object.get("uploadedBy"));
                    }
                    for (var j = 0; j < imageURLs.length; j++) {
                        $('#FriendsStuff').append("<img class='images' src='" + imageURLs[j] + "'/>");
                        $('#FriendsStuffName').append("<div class='username'>'" + Username[j] + "'</div>");
                         console.log("here");
                    }
                },
                error: function (error) {
                    //If the query is unsuccessful, report any errors
                    alert("Error: " + error.code + " " + error.message);
                }
            });
        }
        $(document).ready(function () {
            $(document).on('click', '.username, #find_button', function (event) {
                //debugger;
                event.preventDefault();
                friendName = $(this).is("button") ? null : $(this).text();
                friendFeed(friendName);
            });
        });

    </script>
<div class="error" style="display:none"></div>
<input type="text" id="friendsearch" placeholder="Find Friend" class="input-field" />
<button id="find_button" type="button" class="btn btn-login">Find</button>
<div id="container"></div>

<div id="FriendsStuff"></div>
<div id="FriendsStuffName"></div>
</body>
</html>

你需要的是一个事件的点击戴夫，从类。username

请添加:

 $(document).on('click', '.username', function (event) {
                 //debugger;
                 event.preventDefault();
                 friendName = $(this).innerHTML; // get content of user
                 friendFeed(friendName);
             });

就我个人而言，我更喜欢存储变量，将用于不同的函数属性的元素，你定义和检索$(this).attr("YOUR_ATTRIBUTE_NAME")而不是获取div

的innerHTML

并将字符串存储在:<div class=".username" YOUR_ATTRIBUTE_NAME="Dave">Dave</div>

相关文章：