需要帮助原型 JS/AJAX

Question

我最近一直在用PrototypeJS做一个项目，但是今天遇到了一个问题。

我正在为一个模块制作某种联系人列表，我们可以在其中通过表单添加联系人，或使用链接隐藏它。

这是删除链接的 HTML：

<td>
    <a href="#" id="rmContact" name="<?php echo $contact->ID; ?>">
    <img src="../profil_collab/themes/collab_fr/images/supprime.gif" border="0">
    </a>
</td>

列表中的每个联系人都有一个链接。

这是我为此创建的 AJAX：

Event.observe( $('rmContact'), 'click', function(event) {
    var suppress = new Ajax.Request('annuaire_rm_contact.php', {
        parameters: 
        {
            ref_contact: ref,
            id: this.readAttribute("name")
        },
        onSuccess: function() {
            formdiv.setStyle({
                display: 'none'
            });
            var ajaxCall = new Ajax.Updater("list", "annuaire_contact_list.php", {
                    parameters: { ref: ref}
                }
            );
            div.setStyle({
                display: 'initial'
            });
        }
    });
    Event.stop(event);
});

但是这里有一个问题：我只能删除列表的第一个元素。此外，在调用更新程序后我无法删除。如果需要，我必须刷新页面。

好吧，我什么都试过了，所以如果有人有想法那就太好了:)。

Answer 1

您需要为每个删除链接设置一个唯一的 id 属性。根据MDN documentation：

id global attribute 定义了一个唯一标识符 (ID)，该标识符在整个文档中必须是唯一的。其目的是在链接（使用片段标识符）、脚本或样式（使用 CSS）时识别元素。¹

所以更新链接以具有像这样的 id 属性，并可能为所有删除链接添加一个类名（例如<a class="rmContact"）：

<td>
    <a class="rmContact" href="#" id="rmContact_<?php echo $contact->ID; ?>" name="<?php echo $contact->ID; ?>">
        <img src="../profil_collab/themes/collab_fr/images/supprime.gif" border="0">
    </a>
</td>

然后，使用事件委托来观察页面上的点击，而不是观察具有 id 属性 rmContact 的元素的点击。如果元素是删除链接（例如有一个类名rmLink），则触发AJAX请求。

Event.observe( document, 'click', function(event) {
    var eventElement = Event.element(event);
    //match parent of image (anchor tag)
    if (eventElement.parentNode.match('.rmContact')) {
         eventElement = eventElement.parentNode;
    }
    if (eventElement && eventElement.hasClassName("rmContact")) {
        removeContactLink(eventElement);
    }
    else {
         //handle other clicks, stop event if necessary, etc.
    }
});
//update your function above to accept a removeLink
function removeContactLink(removeLink) {
     var suppress = new Ajax.Request('annuaire_rm_contact.php', {
     ....
}

这有意义吗？请参阅下面的示例。

Event.observe(document, 'click', function(event) {
  var eventElement = Event.element(event);
  if (eventElement.parentNode.match('.rmContact')) {
    eventElement = eventElement.parentNode;
  }
  if (eventElement && eventElement.hasClassName("rmContact")) {
    removeContactLink(eventElement);
  } else {
    //handle other clicks, stop event if necessary, etc.
  }
});
//update your function above to accept a removeLink
function removeContactLink(removeLink) {
  console.log('removeContactLink: ', removeLink.readAttribute("name"));
  //var suppress = new Ajax.Request('annuaire_rm_contact.php', {     });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prototype/1.7.3/prototype.js"></script>
<table>
  <tr>
    <td>Sam</td>
    <td>
      <a href="#" id="rmContact" name="4" class="rmContact">
        <img src="http://gpcpublishing.com/templates/images/icons/delete.gif" border="0">
      </a>
    </td>
  </tr>
  <tr>
    <td>Terry</td>
    <td>
      <a href="#" id="rmContact" name="8" class="rmContact">
        <img src="http://gpcpublishing.com/templates/images/icons/delete.gif" border="0">
      </a>
    </td>
  </tr>
</table>

---

¹_{https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id}