Question

我有一个带有AJAX和jQuery的.js文档，它从带有循环的PHP页面中提取信息。

我的问题是，每当我从PHP文件的while循环调用JS文件时，JavaScript只会从顶部迭代中提取数据，而不是第一，第三，第五或第一数据以下的任何其他数据。

这是JS文件

var delete_group = function load_xml() {
  var xmlhttp;

  if(window.XMLHttpRequest){
    xmlhttp = new XMLHttpRequest();
  } else {
    xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
  }

  xmlhttp.onreadystatechange = function() {
    if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      document.getElementById('status').innerHTML = xmlhttp.responseText;
    }
  }

  var id = document.getElementsByClassName('id')[0].innerHTML

  xmlhttp.open('POST', 'ajax/file.php?id='+id, true);
  xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xmlhttp.send()
}

$(document).ready( function pop_window() {
  $('.delete_group').click( function show_window() {
    $.fallr('show', {
      content: 'Status: <div id="status"> </div>',
      position: 'bottom',
      buttons: {
        button1: {text: 'Yes', danger: true, onclick: delete_group},
        button2: {text: 'Cancel'}
      },
      content: '<p>Are you sure want to delete this?</p>'
               + 'Status: <div id="status"> </div>',
      icon: 'error'
    })
  })
});

这是while循环的PHP剪切：

echo '<li>
        <h4>'.$name.'</h4>
        <div class="btn dropup">
          <button data-toggle="dropdown" class="btn dropdown-toggle">
            Options... <span class="caret"></span>
          </button>
          <ul class="dropdown-menu">
            <li><a href="view.php?id='.$id.'">View</a></li>
            <li><a href="file.php?id='.$id.'">Add Multiple Contacts</a></li>
            <li class="divider"></li>
            <li><a class="delete_group">Delete</a><p hidden class="id">'.$id.'</p></li>
          </ul>
        </div>
      </li>'

如果我激活JavaScript并让脚本执行它想要做的事情，那么它将调用1st class ='id'中的第一个值

如何解决此问题并使document.getElementsByClassName循环并从我想要的项目中获取正确的值？

Answer 1

好的，我想我理解你的问题。如果我误解了什么，请道歉，但我现在会尽力给你答案。

据我了解，您的问题是您需要弄清楚点击了哪个'.delete-group'元素才能找到您要删除的元素的ID。

幸运的是，jQuery以“this”的形式为事件回调提供了这个，这是一个标准的JavaScript DOM对象。（或者，这可能只是JavaScript本身的一个特性，但为了论证，我们称之为jQuery的错误。）

所以，如果我在jQuery中有一个'click'回调，我可以使用$(this)来获取一个引用调用DOM对象的jQuery对象。然后我可以使用jQuery函数来查找关联的属性和父/子/兄弟DOM对象。

在这种情况下，您可能希望使用$(this).siblings('.id')，它应该为您提供类'id'的所有兄弟节点（即同一父节点的DOM元素）的列表作为jQuery对象。在您的情况下，您将只有一个兄弟，因此只需访问第一个元素$(this).siblings('.id')[0]。

然后你可以将它传递给你的Fallr onclick回调函数，这样你就可以将它用于你的AJAX调用以及.html()方法。

如果我在任何时候误解了您，请告诉我，但我相信这应该是您正在寻找的解决方案。我还建议，正如安德鲁在评论中所说，使用jQuery（$.ajax()或$.post()）进行AJAX调用，因为它更易于阅读和更一致。

Ajax和PHP while循环情况

1 个答案: