javascript - 如何将提取的href变成超链接

Question

我正在一个类似于 Facebook 的网站上开发标记部分。这个想法是，每当有人在帖子区域中输入@时，就会出现一个包含他所有 friend 的下拉菜单。然后，他选择要标记的人并单击该人的个人资料。我有一个 javascript 函数，它检测何时按下 @，然后调用另一个 js 函数，然后该函数又将 ajax 请求发送到列表的 php 文件。这部分效果很好。

因此，当用户单击 friend 列表中的某人时，我进行了设置，以便从 php 文件中以纯文本形式提取包含 friend 用户名的 href 部分，然后在 @ 字符之后显示为文本字符串在帖子区域(我在点击 return: false 后阻止了对个人资料的关注)。因此，例如，当有人想要选择约翰·史密斯时，他按@，列表出现，他选择约翰·史密斯，单击他的个人资料，列表消失，然后用户名出现在@后面，如下所示:@john_smith

现在的问题是，我想将 @ 之后的 john_smith 制作成一个超链接，该链接将指向 John Smith 的个人资料，而不仅仅是纯文本。我一直在努力寻找解决方案。任何帮助将不胜感激。

非常感谢! :)

**//php ajax file**

    <?php

    $userLoggedIn = $_POST['userLoggedIn'];

    $userLoggedIn = new User($con, $userLoggedIn);

    $rez = array();
    $rez = $userLoggedIn->getFriendArray();


    if ($rez != ",") {

    $no_commas = explode(",", $rez);

    foreach ($no_commas as $key => $value) {

        $friend = mysqli_query($con, "SELECT first_name, last_name, username, profile_pic FROM users WHERE username='$value'");

        $row = mysqli_fetch_assoc($friend);

         echo "<div class='displayTag'>

                        <a href=" . $row['username'] . " id='grabLink'>         

                            <div>
                                <img src='" . $row['profile_pic'] . "'>
                            </div>  

                            <div>

                                " . $row['first_name'] . " " . $row['last_name'] . "
                                <p style='margin: 0;'></p>
                                <p id='grey'></p>

                            </div>

                            </a>    

                    </div>";


    }


    }

    else {

    echo "<br><p id='ynf'>You have no friends. Please add someone</p>";
    }   

**//js functions**

         function userTag(user) {  // for ajax

         $.post("includes/handlers/ajax_user_tag.php", {userLoggedIn:user}, 
         function(data){

         $('.tag_results').html(data);

         });
         }

        function textTag() { // for extracting href and placing @ and username anywhere in the post area

            $('.displayTag a').click(function(a){

            var x = $(this).attr('href');
            var y = $(this).prop('href');

            var $txt = jQuery("#post_text");
            var caretPos = $txt[0].selectionStart;
            var textAreaTxt = $txt.val();

            $txt.val(textAreaTxt.substring(0, caretPos) + x + textAreaTxt.substring(caretPos) );

            $('.tag_results').html("");

            return false;
          });

          }

    **//js code**

    $("#post_text").keydown(function (e) {  // listens for @
        if(e.which == 50)
          userTag('<?php echo $userLoggedIn; ?>');
        if(e.which != 50)
          $('.tag_results').html("");
      });

      $('.tag_results').hover(function(e) { //calls textTag function on hover
          textTag();
      });

  **//Empty div populated by ajax results**

     <div class="tag_results"> 

     </div>

编辑: 我纯粹是偶然发现了问题所在。在包含 php 类的文件中，strip_tags 用于所有帖子。所以当它打开时我想做的事情几乎是不可能的。现在它正在正常工作。谢谢大家的帮助! :)

Answer 1

我不相信您的点击事件正在捕获点击，因为您的 php 正在动态创建列表元素。此外，您的函数 textTag() 在该函数运行之前实际上不会应用事件，因此它可能会产生问题。将你的 JS 更改为 -

$(document).on('click', '.displayTag a', function() {
    var href = $(this).attr('href');
    //other code applying href to new anchor tag in proper format
});