Javascript 带有两个函数调用的onclick需要两次单击才能运行这两个函数

这可能会被标记为一个副本，因为已经有很多关于这方面的问题，但我无法将这些问题的答案应用到我的代码中

我在Blob存储页面代码中使用Razor、html、css和javascript

下图左侧有三个容器。当点击其中一个时，他们将打开并显示所有的子对象（BLOB）。第一次单击其中一个容器时，仅运行一个函数调用（listContainerBlobs（）），而不是打开容器的函数调用（showHide（））

下面是调用onclick函数的HTMLP标记

<p class="blob-container" onclick="showHide('@containerId', '@arrowId');listContainerBlobs('@jsonBlob', '@container.Name');"><i class="fa fa-caret-right" id="@arrowId"></i>  @container.Name</p>

Js:

这在使用正确的ID和其他值时始终有效，但正如我所说的，我仍然需要单击两次才能调用这两个函数。第一次单击运行

listContainerBlobs（）

，第二次单击

showHide（）

---

你知道为什么吗？

你可以创建一个事件监听器来调用你的函数：

<div class="arrow-blob-container">
    <p class="blob-container" data-container-id="@containerId" data-arrow-id="@arrowId" data-json-blob="@jsonBlob" data-container-name="@container.Name" ><i class="fa fa-caret-right" id="@arrowId"></i>  @container.Name</p>
</div>

显示数据集
显示数据集
显示数据集
显示数据集

当需要附加多个事件时，我建议使用事件监听器而不是

onclick

，至于函数参数，您可以将它们设置为

数据

属性，并在函数内部访问它们。请举一个如何将变量设置为数据属性的示例（我不完全了解javascript-）@empiric，最好同时调用tag.onclick function（）中的其他两个函数吗？设置数据属性只需使用HTML:

data containerid=“@containerid”

等等。您可以执行以下操作：

document.querySelector（“@arrowId”）.dataset.containerid

。沿着这些lines@empiric

querySelector

哪个Id是正确的，这是如何导致Id是一个变量，其中每个循环的最终数字都会增加。那么js真的知道我用

@arrowId

点击的是哪一个吗？（将在p标记上放置一个新Id，但现在让我们使用arrowId运行）您还可以使用类选择器在所有

p

标记上绑定一个事件处理程序，并在函数内部使用来引用调用事件处理程序的元素i not get

currentTarget

on

e

。浏览器会弹出：

e==[object MouseEvent]contId=undefined arrId=undefined json=undefined contanerName=undefined

。此外，它只是第一个可单击的对象，而不是其余对象。e.currentTarget是被单击的元素。您应该能够使用它找到正确的元素。如果始终为“.blob container”，请改用查询选择器。您可以通过该元素上的dataset属性访问数据属性（如在编辑中）。检查：p-tag确实是一个固定元素，但会有几个。就像我说的，这只是第一个可以点击的。querySelector=

返回第一个元素，该元素是与选择器匹配的节点的后代。我不知道这是否是正确的方法（主要是因为我没有让它工作）：思考面：嗯，我添加了一个访问多个元素的数据集的片段。希望它能帮助Sokay，所以我已经尝试过了，现在它没有任何错误，尽管两个例子中单击2次的问题仍然存在。该死！不过谢谢：）
<script>
function listContainerBlobs(json, container) {
    console.log("beginning");
    console.log(json);

    var arr = JSON.parse(json);

    console.log(arr);
    var blobs = document.getElementById('container-blob-display').innerHTML = "<h4>" + container + "</h4>";
    var otherDiv = document.getElementById('section-1');
    var thisDiv = document.getElementById('section-2');

    otherDiv.style.display = 'none';
    thisDiv.style.display = 'inline';

    var blobNumber = 0;

    for (i = 0; i < arr.length; i++){
        blobNumber++;
        var blobId = "blobId" + blobNumber;
        blobs += "<p class='search-result' id='" + blobId + "' onclick='downloadBlob('" + blobId + "', '" + arr[i].Name + "', '" + container + "')'>" + arr[i].Name + "</p>";
    }
    console.log(blobs);
}

function showHide(containerId, arrowId) {
    var c = document.getElementById(containerId);
    var a = document.getElementById(arrowId);

    if (c.style.display === "none") {
        c.style.display = "inline";
        a.className = "fa fa-caret-down";
    } else {
        c.style.display = "none";
        a.className = "fa fa-caret-right";
    }
}
</script>

<div class="arrow-blob-container">
    <p class="blob-container aside-content" id="@newContId" data-containerId="@containerId" data-arrowId="@arrowId" data-jsonBlob="@jsonBlob" data-containerName="@container.Name"><i class="fa fa-caret-right" id="@arrowId"></i>  @container.Name</p>
</div>

document.querySelectorAll('.aside-content').forEach(element => {
    element.addEventListener('click', function (e) {
        let ds = this.dataset;

        showHide(ds.containerid, ds.arrowid);
        listContainerBlobs(ds.jsonblob, ds.containername);
    })
});

<div class="arrow-blob-container">
    <p class="blob-container" data-container-id="@containerId" data-arrow-id="@arrowId" data-json-blob="@jsonBlob" data-container-name="@container.Name" ><i class="fa fa-caret-right" id="@arrowId"></i>  @container.Name</p>
</div>

<script>
    document.querySelectorAll('.blob-container').forEach(element => {
        element.addEventListener('click', function(e) {
            let dataset = e.currentTarget.dataset;

            showHide(dataset.containerId, dataset.arrowId);
            listContainerBlobs(dataset.jsonBlob, dataset.containerName);
        });
    });
</script>