时间戳

首页 > 解决方案 > 如何修复此 JQuery 函数以获取单击元素的父 li 元素的数据值值？

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

问题描述

我不太喜欢 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>

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

我试图改变的原始逻辑如下：点击一个节点应该意味着点击之前的 HTML 代码中的元素。所以点击一个它检索的元素

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

此代码应执行以下操作：

获取被点击元素的内容并将其放入pNode变量中。因此pNode将包含如下内容：6.1 - Listino Prezzi （参考前面的 HTML 代码示例），然后拆分并仅将6.1值放入pNode中。

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

所以我知道父级的数据值字段

  • 元素。事实上，正如您在前面的 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

    为什么？怎么了？我错过了什么？如何尝试解决此问题并获取父级数据值的值

  • 元素？

    • 标签： javascriptjquerydom-eventsjstreejquery-events

    解决方案

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

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

    1. 使用您用作参考的普通 javascript：$(event.target.parentNode)
    2. 使用this不重新运行 DOM 查询，并添加parent(): $(this).parent();
    3. 使用普通的javascript parent()：$(event.target).parent()
    4. 用作参考this.parentNode：$(this.parentNode)

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

    1. 用于data()获取data-*属性：$(this).parent().data('value')
    2. 用于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>

    推荐阅读