如何获取 <li> 元素 js/ajax 的 Id 值

How to get the Id value of <li> element js/ajax

本文关键字：js 元素 ajax Id li 获取 何获取      更新时间：2023-09-26

我发送<option>值的工作代码是

function getXhr() {
    var xhr = null; 
    if(window.XMLHttpRequest) // Firefox et autres
        xhr = new XMLHttpRequest(); 
    else if(window.ActiveXObject){ // Internet Explorer 
        try {
            xhr = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
    } else { // XMLHttpRequest non supporté par le navigateur 
        alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
        xhr = false; 
    } 
    return xhr;
}
function go() {
    var xhr = getXhr();
    xhr.onreadystatechange = function() {
        if(xhr.readyState == 4 && xhr.status == 200) {
            leselect = xhr.responseText;
            document.getElementById('modelecontainer').innerHTML = leselect;
        }
    }
    // Ici on va voir comment faire du post
    xhr.open("POST","contenu_a_charger.php",true);
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    sel = document.getElementById('vehicule');
    idmarque = sel.options[sel.selectedIndex].value;
    xhr.send("idMarque="+idmarque);
}

我只是想更改我以前代码的 sel var 以使 Id 值为 <li> .

我的<li>（来自php循环）

<li id="7" onclick="go()">
    <span class="badge"><?php echo $FM->etat_user;?></span>
    <span class="head"><?php echo $FM->login_user;?></span>
</li>

我的旧工作选择

<select name="vehicule" id="pays" onchange="go()">
    <option value="0">Sélectionnez votre test</option>
    <option value="3">test3</option>
    <option value="1">test1</option>
    <option value="2">test2</option>
</select>

如何获取li元素的 ID（在本例中为"7"）？

由于您使用的是jQuery（根据您的问题标签），
您的所有代码都可以简化为：

$("#7").click(function() {
    $.post("contenu_a_charger.php", "idMarque=" + $(this).attr("id"), function(returnedData) {
        $("#modelecontainer").text(returnedData);
    });
});

这样，您就不必担心任何XHR对象或浏览器兼容性。这一切都已经是图书馆的一部分。它还消除了您在 HTML 中放置任何事件标记的需要，因此您可以删除onclick="go()"。

附言当您从 JavaScript 将处理程序分配给 JavaScript 事件时，您始终可以在处理程序中使用 this 来访问event.srcElement。
（即使用this.id来获取7的值）
例如：document.getElementById("7").onclick = function() { alert(this.id); }

更改以下行：

sel = document.getElementById('vehicule');
idmarque = sel.options[sel.selectedIndex].value;

到：

idmarque = this.options[this.selectedIndex].value

如果你需要一个普通的JavaScript解决方案，你可以这样做： 假设您将列表元素开始标记更改为此<li id="7" onclick="go(event)">，您可以简单地访问 go 函数中的 id，如下所示：

function go(event){
    var id = event.target.id || event.target.parentNode.id;
}

编辑：显然，如果您嵌套更多元素（与Anders解决方案相反），这将不再起作用。假设您无论如何都设置了列表元素的 ID，为什么不这样做：

<li id="7" onclick="go(7)">
  <span class="badge"><?php echo $FM->etat_user;?></span>
  <span class="head"><?php echo $FM->login_user;?></span>
</li>

然后，您可以访问 ID 作为函数的参数：

function go(id){
    var xhr = getXhr();
    // ....
}
相关文章：