Question

我有两个文件，一个包含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>

Answer 1

使用您的代码，我做了一些更改，希望这不会给您带来不便：

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){

2）如果您查看click函数，您会看到此行 var divContext = $（e.target）.parent（）; ，< strong> $（e.target）等同于带有jquery的箭头功能中的 $（this）。如果不喜欢箭头功能，可以按以下方式使用它：

$('.link').click((e) => {

AJAX：事件监听器上的$（this）

1 个答案: