代码之家 › 专栏 › 技术社区 › AndreaNobili

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

jquery-events jstree javascript-events jquery javascript

1

AndreaNobili · 技术社区 · 7 年前

我不太喜欢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 will包含如下内容: 6.1-Listino Prezzi (参考前面的HTML代码示例),然后拆分并放入 pNode 6.1 价值

所以我知道 数据值

<li role="treeitem" data-jstree="{"opened":true,"selected":true,"icon":"/_layouts/15/images/ArxeiaProtocollo/Default/Titolario/tag.png"}" 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">

正如你所看到的那样 数据值=“6.1” 它是我必须检索并在函数中使用的值。

// 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

为什么?怎么了?我错过了什么?如何尝试修复此问题并获取父母的

要素

1 回复 | 直到 7 年前

1

KL_ 7 年前

问题是在同一代码中混合了jQuery和普通javascript。这个 data() 函数,例如,它仅适用于jQuery选择器。

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

使用您用作参考的普通javascript: $(event.target.parentNode)
使用 this 不重新运行DOM查询,并添加 parent() : $(this).parent() ;
将普通javascript与 父项() : $(event.target).parent()
使用 this.parentNode $(this.parentNode)

现在,关于获取属性 data-value ,通过jQuery引用,您可以使用以下方法:

使用得到 data-* 属性: $(this).parent().data('value')
使用 attr() 要获取任何属性,请执行以下操作: $(this).parent().attr('data-value')

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>

2

0

OPTIMUS PRIME 7 年前

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

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

或

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