Question

我需要在DOM中的onclicks函数中获取链接。

链接是：

<div class="producto_no_hover" onclick="window.location.href='http://kenayhome.com/6279-dixon-cabecero-tapizado.html'" style="cursor: pointer; width: 273px; height: 227px; margin-top: 20px; overflow: hidden; background: url(http://img1.kenayhome.com/13268/dixon-cabecero-tapizado.jpg) 50% 50% / cover no-repeat;">
    <div class="comprar_lupa" style="overflow: hidden; opacity: 0; width: 0px;">
        <div class="colores">
            <ul>
                <li><img src="http://img3.kenayhome.com/img/co/2332.jpg" alt="Blanco" width="22" height="22"></li>
                <li><img src="http://img3.kenayhome.com/img/co/2333.jpg" alt="Crema" width="22" height="22"></li>
            </ul>
        </div>
        <div style="float:right; margin: 0px 5px">
            <a class="boton_add_cart comprar" href="http://kenayhome.com/carro-de-la-compra?add=&amp;id_product=6279&amp;token=3949f34ffcc8206453a2425d90f8e04a" rel="ajax_id_product_0" title="Add to cart">
            </a>
        </div>
        <a href="http://kenayhome.com/6279-dixon-cabecero-tapizado.html">
            <div class="lupa"></div>
        </a>
    </div>
    <div class="tam_producto" style="height: 227px; overflow: hidden;">
        <div class="datos_producto" style="padding: 6px 0px 0px 3px;">
            <div class="precios">
                <div class="precio_anterior"></div>
                <div class="frase_precio">En Kenay</div>
                <div class="precio_actual">218,00 €</div>
            </div>
        </div>
    </div>
    <div class="mas_datos_producto" style="width: 273px; height: 75px; overflow: hidden;">
        <div class="nombre_producto">
            <h3>Dixon cabecero tapizado</h3>
        </div>
        <div class="description" style="display: none;">
            Consigue&nbsp;un&nbsp;  estilo nórdico  &nbsp;en tu dormitorio con el&nbsp;  cabecero tapizado capitone&nbsp;  Dixon  .&nbsp;  Este&nbsp;  cabecero de cama&nbsp;  está tapizado en...
        </div>
    </div>
</div>

在我的JS中，我尝试了以下但无法使其工作。

elements = document.getElementsByClassName("producto_no_hover");

var array = []

for (var i = 0; i < elements.length; i++) {
    array.push(elements[i].onclick=function(){window.location.href});
    console.log(array);
}

如何定位此onclick href？

Answer 1

好的，你有几个语法错误，但是this codepen应该完成你想要做的事情，虽然我不知道为什么你要把元素数组放到第二个数组中。

elements = document.getElementsByClassName("product_no_hover");

var array = [];

for (var i = 0; i < elements.length; i++) {
    elements[i].onclick= function(){
        window.location.href = "http://stackoverflow.com/questions/28199052/is-it-possible-to-get-a-href-inside-an-onclick";
      };
  array.push(elements[i]);
}

<div class="product_no_hover">Lorem Ipsum</div>
<div class="product_no_hover">Lorem Ipsum</div>
<div class="product_no_hover">Lorem Ipsum</div>
<div class="product_no_hover">Lorem Ipsum</div>

（该代码不适用于Codepen，因为无法将Stackoverflow加载到iframe中。）

但我想问你为什么要这样做。当您可以使用锚标记时，不建议使用JavaScript进行重定向。是否有任何原因必须是JavaScript重定向？为什么你不能只是切换到锚标签并在html中添加href，或者切换到锚标签，然后用JS添加href，如果这样做更好？

Answer 2

您可以通过转换功能正文toString然后使用substring获取所需内容来执行此操作，例如：

var elements = document.getElementsByClassName("producto_no_hover");

var array = []

for (var i = 0; i < elements.length; i++) {
    var functionBody = elements[i].onclick.toString();
    array.push(functionBody.substring( functionBody.indexOf("='") + 2, functionBody.lastIndexOf("'") ));
    console.log(array); // will return ["http://kenayhome.com/6279-dixon-cabecero-tapizado.html"]
}

indexOf和lastIndexOf会返回indexes个搜索关键字，在这种情况下我们会删除所有内容

='..your url..'
^^            ^

jsFiddle demo

是否可以在onclick中获得href？

2 个答案: