Question

我在理解如何在这种情况下获取属性时遇到问题。想象一下，我在这个标记中有UL图像和按钮。请注意，这个想法是从mysql数据库动态生成这些项目。

<div id="div-items">
<ul>
    <li name="add" data-price="20"><figure><img src="images/Desert.jpg" width="50%"   height="50%"><figcaption><button  class="btn btn-primary">Add Item</button></figcaption></figure></li>
    <li name="add"  data-price="10"><figure><img src="images/Penguins.jpg" width="50%" height="50%"><figcaption><button  class="btn btn-primary">Add Item</button></figcaption></figure></li>
    <li name="add" data-price="15"><figure><img src="images/Jellyfish.jpg" width="50%" height="50%"><figcaption><button class="btn btn-primary">Add Item</button></figcaption></figure></li>
</ul>

我正在为每个li项目的每个按钮设置一个eventListener，如下所示：

var addItems = document.getElementsByTag('button');
addItemsLen = addItems.length;
var mycount = 0;
for (var i=0; i < addItemsLen; i++) 
{
    var thisitem = addItems[i];
    thisitem.addEventListener("click", getPrice, false);

};

因此，当触发按钮点击事件时，我希望能够访问li项目的详细信息。例如，我希望能够获得img src或数据价格。 getPrice函数是这个

function getPrice(e)
{
    //I know this is the button but I want the li ???
    var el = e.target;

     var price = el.getAttribute("data-price");
    alert(price);
}

但这不起作用。我可以看到目标是我想要的按钮是li但是这是按钮的childNode或兄弟。我尝试了几件事，但是无法解决getPrice中需要的东西来获取数据价格...

注意：对于所有那些JQuery大师 - 是的我知道它可以在JQuery中完成...请不要建议JQuery我想要一个纯JavaScript解决方案

希望有人能把我放在这里。

Answer 1

要在纯JavaScript中解决此问题，您可以尝试以下操作。你已经有了按钮，所以你需要找到最近的祖先'li'元素：

var findParent = function(el, nodeName) {
    while (el !== null) {
        if (el.nodeName.toLowerCase() == nodeName) {
            return el;
        }
        el = el.parentNode;
    }
    return null;
};

然后，重写getPrice函数以找到祖先li：

var getPrice = function(event) {
    var button = event.target;
    var li = findParent(button, 'li');
    var price = li.getAttribute('data-price');
    alert(price);
};

编辑：从这里开始，如果您需要访问图片，可以使用各种技巧。如果您不关心与旧IE的兼容性（有关详细信息，请参阅http://caniuse.com/queryselector），您可以使用querySelector查找子图像：

var getPrice = function(event) {
    var button = event.target;
    var li = findParent(button, 'li');
    var price = li.getAttribute('data-price');
    alert(price);
    var image = li.querySelector('img');
    var imageSource = img.getAttribute('src');
    alert(imageSource);
};

Answer 2

这有点好事，但这会奏效......

function getPrice(e)
{
    var el = e.target;
    var price = el.parentNode.parentNode.parentNode.getAttribute("data-price");
    console.log(price);

}

在这种情况下，e.target是嵌套在<li>标记中几层深的按钮。由于您是从服务器生成此列表，我个人的偏好是，将您的HTML更改为...

<div id="div-items">
<ul>
    <li name="add" data-price="20"><figure><img src="images/Desert.jpg" width="50%"   height="50%"><figcaption><button  class="btn btn-primary" data-price="20">Add Item</button></figcaption></figure></li>
    <li name="add"  data-price="10"><figure><img src="images/Penguins.jpg" width="50%" height="50%"><figcaption><button  class="btn btn-primary" data-price="10">Add Item</button></figcaption></figure></li>
    <li name="add" data-price="15"><figure><img src="images/Jellyfish.jpg" width="50%" height="50%"><figcaption><button class="btn btn-primary" data-price="50">Add Item</button></figcaption></figure></li>
</ul>

如果你这样做，你可以按照你的方式保持你的javascript。

在JavaScript NOT JQuery中按钮上触发click事件后访问childNode或sibling属性

2 个答案: