Question

我一直在研究其他一些例子，但不幸的是它们并不完全相同。我试图删除一些数据onclick（在这里省略该部分，只需要id）。问题是它为我想要的id返回undefined。

 function deleteMessage(){
    var $currentId = $(this).closest(".ulrecords").attr('id');
    alert("ID: " + $currentId)
 }

该方法被称为

<a href="javascript:deleteMessage();" id="amessage">

HTML看起来像这样

<ul class="chat-messages">
  <ul id="msg_1234567890_a1bs2e" class="ulrecords">
   <li>
     John
     <span>27 minutes ago</span>
      <a href="javascript:deleteMessage();" id="amessage"> X</a>
    </li>
    <li id="limessage">
       Some message here
    </li>
  </ul>
  <ul id="msg_9234742878_73bhad" class="ulrecords">
   <li>
     John
     <span>28 minutes ago</span>
      <a href="javascript:deleteMessage();" id="amessage"> X</a>
    </li>
    <li id="limessage">
       Some other message here
    </li>
  </ul>
</ul>

所以，当我点击其中一个ul时，我想获得它希望任何人都能指出我正确的方向

Answer 1

因为this是您的案例中的窗口。

传递对您点击的元素的引用

<a href="javascript:deleteMessage(this);" id="amessage">

和

function deleteMessage(elem){
    var $currentId = $(elem).closest(".ulrecords").attr('id');
    alert("ID: " + $currentId)
}

或者更好的是，使用eventListeners附加事件。

$(document).on("click", ".ulrecords", function () {
    alert(this.id);
});

或

$(document).on("click", ".ulrecords a", function () {
    var $currentId = $(this).closest(".ulrecords").attr('id');
});

ids也是单数。

Answer 2

您通过href链接调用该方法，该链接不会将该方法的执行上下文设置为单击的元素。为了获得正确的元素，不要通过href调用该方法，而是将单击处理程序附加到它。现在，您的锚点有重复的ID，这是您需要修复的完全不同的问题。

我将一个类放到示例中的所有锚中，以便使用jQuery轻松选择它们。

<a href="javascript:deleteMessage();" class="my-button">X</a>

和JavaScript：

$(function () {
    $(document).on("click", ".my-button", function () {
        var $currentId = $(this).closest(".ulrecords").attr('id');
        alert("ID: " + $currentId);
    });
});

Answer 3

＆＃13;

$(document).ready(function() {
  $('.delmsg').click(function() {
   alert($(this).parent().parent('ul').attr('id'));
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="chat-messages">
  <ul id="msg_1234567890_a1bs2e" class="ulrecords">
   <li>John <span>27 minutes ago</span> <a href="javascript:deleteMessage();" class="delmsg">X</a></li>
   <li id="limessage">Some message here</li>
  </ul>
  <ul id="msg_9234742878_73bhad" class="ulrecords">
   <li>John <span>28 minutes ago</span> <a href="javascript:deleteMessage();" class="delmsg">X</a></li>
   <li id="limessage">Some other message here</li>
  </ul>
</ul>

＆＃13;

Answer 4

$(function(){
  $('.remove').on('click', function(){
    var currentId = $(this).closest(".ulrecords").attr('id');
    console.log(currentId);
  });  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="msg_1234567890_a1bs2e" class="ulrecords">
  <li>
    John
    <span>27 minutes ago</span>
    <a href="javascript:void(0);" class="remove"> X</a>
  </li>
  <li id="limessage">
    Some message here
  </li>
</ul>
<ul id="msg_9234742878_73bhad" class="ulrecords">
  <li>
    John
    <span>28 minutes ago</span>
    <a href="javascript:void(0);" class="remove"> X</a>
  </li>
  <li id="limessage">
    Some other message here
  </li>
</ul>

JQuery最近的属性返回undefined

4 个答案: