Question

我正在尝试仅使用普通js重做使用jQuery的函数。我似乎无法弄清楚如何从该对象获取所需的数据。我需要获取parentid数据属性的值，但我尝试过的任何方法都无效！

在我的功能范围内（如果有）

console.log(this);

我得到输出：

<a href="javascript:;" data-parentid="1" data-groupingtype="2">Text Content</a>

所以我知道我需要的数据在对象内。我知道getAttribute（“ AttributeName”）函数，但无法通过 this 对象访问它。

此处是功能的设置方式。

const selectionList = document.querySelectorAll("#selectionList li a");
for (var i = 0; i < selectionList.length; i++) {
    selectionList[i].addEventListener("click", function () {
        document.querySelector("#selectionButton span:first-child").textContent = (this.textContent);
        console.log(this);
        selectedParentID = parseInt($(this).data("parentid")); //this is what I can't figure out how to replace
        selectedType = $(this).data("type"); //and this
    });
}

这是我要替换的jQuery函数：

$("#selectionList li a").on("click", function () {
    $("#selectionButton span:first-child").text($(this).text());
    selectedParentID = parseInt($(this).data("parentid"));
    selectedType = $(this).data("groupingtype");
    if (selectedParentID && selectedType && selectedOtherType) {
        doSomething();
    }
});

HTML：

<div id="selectionContainer" class="form-group">
                    <button id="selectionButton" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span>Select Grouping</span>&nbsp;<span class="caret"></span></button>
                    <ul id="selectionList" class="dropdown-menu" role="menu">
                            <li><a href="javascript:;" data-parentid="11" data-type="1">Option 1</a></li>
                            <li><a href="javascript:;" data-parentid="11" data-type="2">Option 2</a></li>
                            <li><a href="javascript:;" data-parentid="11" data-type="3">Option 3</a></li>
                                <li class="divider"></li>
                            <li><a href="javascript:;" data-parentid="12" data-type="1">Alternate 1</a></li>
                            <li><a href="javascript:;" data-parentid="12" data-type="2">Alternate 2</a></li>
                            <li><a href="javascript:;" data-parentid="12" data-type="3">Alternate 3</a></li>
                    </ul>
                </div>

如果有人可以指出正确的方向，我将不胜感激！

Answer 1

如果您有一个包含data-foo="bar"的商品，则可以通过以下方式获取此属性

foo.getAttribute("data-foo")

data()函数是jQuery function，不适用于Vanilla JS。随后，您将需要使用

this.getAttribute("data-parentid")

Answer 2

您可以做的一些更改

代替

document.querySelector("#selectionButton span:first-child").textContent 你可以做

let getButtonSpan = document.getElementById('selectionButton').firstElementChild;

这将使该dom元素中ID为selectionButton的第一个孩子

您可以使用forEach，尽管传统的for循环同样好。使用forEach的参数获取锚标记dom并向其添加事件侦听器。单击它时，使用innerHTML获取文本并将其设置为按钮的第一个子项。

除了getAttribute之外，您还可以使用dataset从dom中检索data属性。

在替换jquery的代码中，您正在使用$(this).data("parentid")，这违反了您的目标

let getButtonSpan = document.getElementById('selectionButton').firstElementChild;
document.getElementById('selectionList').querySelectorAll('a').forEach(function(item) {
  item.addEventListener('click', function() {
    getButtonSpan.innerHTML = item.innerHTML;
    let selectedParentID = item.dataset.parentid;
    let selectedType = item.dataset.type;
    if (selectedParentID && selectedType) {
      doSomeThing(selectedParentID, selectedType);
    }
  })

})

function doSomeThing(a, b) {
  console.log(`selectedParentID : ${a} & selectedType :${b}`)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="selectionContainer" class="form-group">
  <button id="selectionButton" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
       <span>Select Grouping</span>&nbsp;
       <span class="caret"></span>
  
  </button>
  <ul id="selectionList" class="dropdown-menu" role="menu">
    <li><a href="javascript:;" data-parentid="11" data-type="1">Option 1</a></li>
    <li><a href="javascript:;" data-parentid="11" data-type="2">Option 2</a></li>
    <li><a href="javascript:;" data-parentid="11" data-type="3">Option 3</a></li>
    <li class="divider"></li>
    <li><a href="javascript:;" data-parentid="12" data-type="1">Alternate 1</a></li>
    <li><a href="javascript:;" data-parentid="12" data-type="2">Alternate 2</a></li>
    <li><a href="javascript:;" data-parentid="12" data-type="3">Alternate 3</a></li>
  </ul>
</div>

如何从“此”对象获取HTML数据-香草JavaScript

2 个答案: