如何修复此 JQuery 函数以获取单击元素的父 li 元素的 data-value 值？

Question

我不太喜欢 JavaScript 和 JQuery，我发现以下困难。

页面中有一棵树（使用 JQuery **JStree* 库）。

所以在我的视图代码中，我有类似这样的东西代表这棵树的一个节点：

<li role="treeitem" data-jstree="{&quot;opened&quot;:true,&quot;selected&quot;:true,&quot;icon&quot;:&quot;/_layouts/15/images/ArxeiaProtocollo/Default/Titolario/tag.png&quot;}" data-id="1" data-value="6.1" aria-selected="true" aria-level="3" aria-labelledby="j1_5_anchor" aria-expanded="true" id="j1_5" class="jstree-node  jstree-open">
    <i class="jstree-icon jstree-ocl" role="presentation"/>
    <a class="jstree-anchor  jstree-clicked" href="#" tabindex="-1" id="j1_5_anchor">
        <i class="jstree-icon jstree-themeicon jstree-themeicon-custom" role="presentation" style="background-image: url(&quot;/_layouts/15/images/ArxeiaProtocollo/Default/Titolario/tag.png&quot;); background-position: center center; background-size: auto;"/>6.1 - Listino Prezzi</a>
    <ul role="group" class="jstree-children">
        <li role="treeitem" data-jstree="{&quot;opened&quot;:false,&quot;icon&quot;:&quot;/_layouts/15/images/ArxeiaProtocollo/Default/Titolario/tag.png&quot;}" data-id="1" data-value="6.1.1" aria-selected="false" aria-level="4" aria-labelledby="j1_6_anchor" id="j1_6" class="jstree-node  jstree-leaf">
            <i class="jstree-icon jstree-ocl" role="presentation"/>
            <a class="jstree-anchor" href="#" tabindex="-1" id="j1_6_anchor">
                <i class="jstree-icon jstree-themeicon jstree-themeicon-custom" role="presentation" style="background-image: url(&quot;/_layouts/15/images/ArxeiaProtocollo/Default/Titolario/tag.png&quot;); background-position: center center; background-size: auto;"/>6.1.1 - Acquisti - AAA</a>
        </li>
        <li role="treeitem" data-jstree="{&quot;opened&quot;:false,&quot;icon&quot;:&quot;/_layouts/15/images/ArxeiaProtocollo/Default/Titolario/tag.png&quot;}" data-id="0" data-value="6.1.0" aria-selected="false" aria-level="4" aria-labelledby="j1_7_anchor" id="j1_7" class="jstree-node  jstree-leaf jstree-last">
            <i class="jstree-icon jstree-ocl" role="presentation"/>
            <a class="jstree-anchor" href="#" tabindex="-1" id="j1_7_anchor">
                <i class="jstree-icon jstree-themeicon jstree-themeicon-custom" role="presentation" style="background-image: url(&quot;/_layouts/15/images/ArxeiaProtocollo/Default/Titolario/tag.png&quot;); background-position: center center; background-size: auto;"/>6.1.0 - Acquisti - ZZZ</a>
        </li>
    </ul>
</li>

所以这是使用 JSTree JQuery 库渲染树的脚本（它工作得很好）：

<script>
$(function () { 
    $(#tree).jstree(
    { 
        "search" : { 
            "show_only_matches" : false 
        },        
        "plugins" : ["search"] 
    }
}).delegate("a", "click", function (event, data) {
    var pNode = event.target.parentNode.innerText;
    pNode = pNode.split(" - ")[0];

    // MY NEW CODE START
    var pNodeDataValue = event.target.parentNode.data('value');
    alert(pNodeDataValue);
    // MY NEW CODE END

    window.location.replace('" + link + "' + pNode); });
    var to = false; 
    $('#tree_q').keyup(function () { 
        if(to) { clearTimeout(to); } 
        to = setTimeout(function () { 
            var v = $('#tree_q').val(); 
            $('#tree').jstree(true).search(v); 
        }, 250); 
    }); 
}); 
</script>

如您所见，此代码还包含一个 delegate，它定义了一个函数来处理对特定树节点的点击，在这里我发现在尝试进行一些小改动时遇到了一些困难按原逻辑。

原来我想改的逻辑是这样的：点击节点应该是点击之前HTML代码中的元素。所以点击它检索的元素

var pNode = event.target.parentNode.innerText;
pNode = pNode.split(" - ")[0];

此代码应执行以下操作：

获取点击元素的内容，放入pNode变量中。所以 pNode 将包含这样的东西： 6.1 - Listino Prezzi （参考前面的 HTML 代码示例），然后拆分并放置进入 pNode 只有 6.1 值。

好的，它工作正常但是因为我必须从我的树可视化中删除这个索引号（6.1 ans 类似）我必须从其他地方获得这个值。

所以我知道父

元素的data-value字段。事实上，正如您在前面的 HTML 示例代码中看到的那样，我有类似的东西：

<li role="treeitem" data-jstree="{&quot;opened&quot;:true,&quot;selected&quot;:true,&quot;icon&quot;:&quot;/_layouts/15/images/ArxeiaProtocollo/Default/Titolario/tag.png&quot;}" data-id="1" data-value="6.1" aria-selected="true" aria-level="3" aria-labelledby="j1_5_anchor" aria-expanded="true" id="j1_5" class="jstree-node  jstree-open">

如您所见，有 data-value="6.1"，这是我必须检索然后在我的函数中使用的值。

正如您在我之前的 JQuery 代码中看到的那样，我尝试以这种方式获取它：

// MY NEW CODE START
var pNodeDataValue = event.target.parentNode.data('value');
alert(pNodeDataValue);
// MY NEW CODE END

但它不起作用，在我的浏览器控制台中，我收到以下执行此行的错误消息：

TypeError: event.target.parentNode.data is not a function

为什么？怎么了？我错过了什么？如何尝试解决此问题并获取父元素

的 data-value 的值？

Answer 1

您正在尝试在 DOM 对象上使用 jQuery 函数 data()，但它没有这样的方法。

改用：

var pNodeDataValue = event.target.parentNode.dataset.value;

或

var pNodeDataValue = $(event.target).parent().data('value');

Answer 2

问题是您在同一代码中混合了 jQuery 和纯 javascript。 data() 函数，例如，它只适用于 jQuery 选择器。

首先，让我们选择选择器。
使用 jQuery 你有一些方法可以做到这一点：

使用普通的 javascript 作为参考：$(event.target.parentNode)
使用 this 不重新运行 DOM 查询，并添加 parent()：$(this).parent()；
将普通 javascript 与 parent() 一起使用：$(event.target).parent()
参考this.parentNode：$(this.parentNode)

现在，关于获取属性 data-value，使用 jQuery 引用，您可以使用这些方法：

使用data()得到data-*个属性：$(this).parent().data('value')
使用attr()获取任何属性：$(this).parent().attr('data-value')

但是，如果你真的想使用普通的 javascript 引用（我不推荐它，因为你已经有 jQuery），你可以使用 javascript getAttribute(): event.target.parentNode.getAttribute('data-value')

带有示例的代码段：

$("#clickable").on("click", function(event, data){
  console.log("With jQuery: ",
  
  "\n$(event.target.parentNode).data('value') :",
  $(event.target.parentNode).data('value'),
  
  "\n$(this.parentNode).data('value') :",
  $(this.parentNode).data('value'),
  
  "\n$(event.target).parent().data('value') :",
  $(event.target).parent().data('value'),
  
  "\n$(this).parent().data('value') :",
  $(this).parent().data('value'),
  
  "\n$(this).parent().attr('data-value') :",
  $(this).parent().attr('data-value'),
  
  "\n\nWith plain Javascript:",
  "\nthis.parentNode.getAttribute('data-value')",
  this.parentNode.getAttribute('data-value'),
  
  "\nevent.target.parentNode.getAttribute('data-value') :",
  event.target.parentNode.getAttribute('data-value'));
});

#clickable {
  border: 1px solid black;
  background-color: blue;
  width: ;
  float: left;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div id="parent" data-value="datavalue">
  <div id="clickable">
    Click me!
  </div>
</div>

如何修复此 JQuery 函数以获取单击元素的父 li 元素的 data-value 值？

How can I fix this JQuery function to obtain the data-value value of the parent li element of a clicked element?

javascript

jquery

dom-events

jstree

jquery-events