Question

<div class="plp-product">
  <a href="#">
    <img src="../../../kay/images/PLP/jared_000.jpg" />
    <small class="more-options">More options available</small>
    <h3>Neil Lane Engagement Ring 1 3/8 ct tw Diamonds 14K White Gold</h3>
    <h4 class="price">$4,299.00</h4>
    <h4 class="price price--sale"> </h4>
    <a href="#" class="button--quick-view"> <span class="icon-search"></span> Quick View</a>
    <label class="compare-button">
      <input type="checkbox" id="item1" class="chk" onclick="getImg(this)">Compare</label>
  </a>
</div>

JS：

  var getImg = function(val){
     var data = document.getElementById(val.id).parentElement.parentElement;
         data.find('img');}

我想访问数据中的img标记。无法为此找到解决方法。请帮我解决这个问题。感谢。

Answer 1

以下是纯JavaScript中的示例代码。
＆＃xA;它遍历DOM树以从复选框到图像元素。

＆＃xA;＆＃xA;

＆＃xD;＆＃xA;

  var getImg = function（ele）{＆＃xD;＆＃xA; var anch = ele.parentNode.parentNode;＆＃xD;＆＃xA; var img = anch.getElementsByTagName（'img'）[0];＆＃xD;＆＃xA; alert（img.src）;＆＃xD;＆＃xA;}

＆＃xD;＆＃xA;

 ＆lt; div class =“plp-product”＆gt;＆＃xD;＆＃xA; ＆lt; a href =“＃”＆gt;＆＃xD;＆＃xA; ＆lt; img src =“../../../ kay / images / PLP / jared_000.jpg”/＆gt;＆＃xD;＆＃xA; ＆lt; small class =“more-options”＆gt;更多可用选项＆lt; / small＆gt;＆＃xD;＆＃xA; ＆lt; h3＆gt; Neil Lane订婚戒指1 3/8克拉tw钻石14K白金＆lt; / h3＆gt;＆＃xD;＆＃xA; ＆lt; h4 class =“price”＆gt; $ 4,299.00＆lt; / h4＆gt;＆＃xD;＆＃xA; ＆lt; h4 class =“价格 - 销售”＆gt; ＆LT; / H4＆GT;＆＃的xD;＆＃XA; ＆lt; a href =“＃”class =“button  -  quick-view”＆gt;＆＃xD;＆＃xA; ＆lt; span class =“icon-search”＆gt;＆lt; / span＆gt;快速浏览＆＃xD;＆＃xA; ＆LT; / A＆GT;＆＃的xD;＆＃XA; ＆lt; label class =“compare-button”＆gt;＆＃xD;＆＃xA; ＆lt; input type =“checkbox”＆＃xD;＆＃xA; ID = “ITEM1” ＆＃的xD;＆＃XA;类= “CHK” ＆＃的xD;＆＃XA;的onclick = “GETIMG（这）” ＆GT;比较＆＃的xD;＆＃XA; ＆LT; /标签＆gt;＆＃的xD;＆＃XA; ＆LT; / A＆GT;＆＃的xD;＆＃XA;＆LT; / DIV＆GT;

＆＃的xD;＆＃XA;

 ＆＃的xD;＆＃XA; ＆＃XA;

Answer 2

data不是jquery对象（因为你使用了本机函数），因此没有find方法。所以而不是

data.find("img");

试

$(data).find("img");

Answer 3

我假设这将是一些生成的标记，并且同一页面上有许多产品。

我的解决方案是简单地向img元素添加某种id，然后在on-click事件中引用它。这样，如果您将来更改HTML的结构，点击就不会中断。

<div class="plp-product">
  <a href="#" id="product_id" >
    <img id="product_id_img" src="../../../kay/images/PLP/jared_000.jpg" />
    <small class="more-options">More options available</small>
    <h3>Neil Lane Engagement Ring 1 3/8 ct tw Diamonds 14K White Gold</h3>
    <h4 class="price">$4,299.00</h4>
    <h4 class="price price--sale"> </h4>
    <a href="#" class="button--quick-view"> <span class="icon-search"></span> Quick View</a>
    <label class="compare-button">
      <input type="checkbox" id="item1" class="chk" onclick="getImg(product_id)">Compare</label>
  </a>
</div>

然后在点击功能中：

var getImg = function(productid)
{
     var img = document.getElementById(productid + "_img");
}

如何找到标签是父元素？

3 个答案: