我正在开发类似于Facebook的网站上的标记部分。这个想法是，只要有人在帖子区域输入@，就会出现一个包含他所有朋友的下拉菜单。然后他选择他想要标记的人并点击该人的个人资料。我有一个javascript函数，可以检测@何时被按下，然后调用另一个js函数，然后又将一个ajax请求发送到列表的php文件。这部分很有用。
因此，当用户点击他们朋友列表中的某个人时，我进行了设置，以便将包含朋友用户名的href部分作为纯文本从php文件中提取出来，然后显示为正确的文本字符串在帖子区域中的@字符之后（我在点击var inputList = [];
function createInput() {
var input = document.createElement('input');
input.setAttribute('type', 'password');
document.getElementById('inputs').appendChild(input);
inputList.push(input);
}
// This will essentially just create an input in whatever container you specify and also push the DOM element into an array.
function changeValues(checkbox) {
if (checkbox.checked) {
for (var i = 0; i < inputList.length; i++) {
inputList[i].type = 'text';
}
} else {
for (var i = 0; i < inputList.length; i++) {
inputList[i].type = 'password';
}
}
}
// This just changes the type from text to password for every element
// in the array based on if the checkbox is checked or not.
后阻止了对个人资料的跟踪）。所以，例如，当有人想选择John Smith时，他按@，列表出现，他选择John Smith，点击他的个人资料，列表消失，然后用户名出现在@之后，如下所示：@john_smith
现在麻烦的是，我希望在@之后将john_smith变成一个超链接，这将导致John Smith的个人资料，而不是纯文本。我一直在努力寻找解决方案。任何帮助将不胜感激。
非常感谢！ ：）
return: false 修改
我发现问题是什么，纯粹是偶然的。在包含php类的文件中，**//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>
用于所有帖子。所以我打算做的事情实际上是不可能的。现在它正在按预期工作。谢谢大家的帮助！ ：）
答案 0 :(得分：2)
我不相信您的点击事件正在捕获点击，因为您的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
});
答案 1 :(得分：0)
首先，我会更改一些PHP响应，以便更容易获得firend的全名。
postgres_ext然后我会修改JS函数
**//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 class='fullname'>
" . $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>";
}