我有两个文件,一个包含 html 和 javascript 代码,另一个包含文本。它有效,但仅适用于第一个 div,因为我在 javascript 代码中指定了它。现在我想仅在单击的元素上显示文本。我想使用 $(this) 属性,但如何使用?
HTML 代码
<div id="ajax">
<div>
<ul>
<li>list 1</li>
</ul>
<a href="" class="link">show</a>
</div>
<div>
<ul>
<li>Another list</li>
<li>Another list 2</li>
</ul>
<a href="" class="link">show</a>
</div>
</div>
<script type="text/javascript">
var btns = document.querySelectorAll('.link');
var username = "username";
var message = "This is my message";
for (var i = 0; i < btns.length; i++) {
var btn = btns[i];
btn.addEventListener('click', function(e){
e.preventDefault();
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var li = document.createElement('li');
$('#ajax div ul')[0].append(li);
document.getElementsByTagName('ul')[0].lastChild.innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open('GET', 'insert.php?username='+username+'&msg='+message, true);
xmlhttp.send();
})
}
</script>
最佳答案
使用你的代码我做了一些更改,希望不会造成不便:
var username = "username";
var message = "This is my message";
$('.link').click((e) => {
var divContext = $(e.target).parent();
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
divContext.find("li:last").after("<li></li>");
divContext.find("li:last").append(xmlhttp.responseText);
}
}
xmlhttp.open('GET', 'insert.php?username='+username+'&msg='+message, true);
xmlhttp.send();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ajax">
<div>
<ul>
<li>list 1</li>
</ul>
<a href="" class="link">show</a>
</div>
<div>
<ul>
<li>Another list</li>
<li>Another list 2</li>
</ul>
<a href="" class="link">show</a>
</div>
</div>
1) 我替换了 var btns = document.querySelectorAll('.link');
和 btn.addEventListener('click', function(e) {
惠特 $('.link').click((e) => {
2) 如果你查看点击函数,你会看到这一行 var divContext = $(e.target).parent();, < strong>$(e.target) 相当于 jquery 中箭头函数中的 $(this) 。如果不喜欢箭头功能,您可以这样使用它:
$('.link').click(function() {
var divContext = $(this).parent();
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
divContext.find("li:last").after("<li></li>");
divContext.find("li:last").append(xmlhttp.responseText);
}
}
xmlhttp.open('GET', 'insert.php?username='+username+'&msg='+message, true);
xmlhttp.send();
});
关于javascript - AJAX:事件监听器上的 $(this),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52348175/