如何将 <a> href 自动设置为另一个 div onclick 函数 href答案

【问题标题】：How to set <a> href automatically to another div onclick function href如何将 <a> href 自动设置为另一个 div onclick 函数 href
【发布时间】：2021-07-10 07:47:44
【问题描述】：

我有一个这样的 div：

<div onclick="location.href='';" style="cursor: pointer;">
    <div class="item">   
        <a href="example" class="btn">Buy</a>                
    </div>  
</div>

我想将设置为example的<a>的href自动分配给onclick函数的href：

<div onclick="location.href='';" style="cursor: pointer;">

那该怎么做呢？

非常感谢你们的任何想法或建议......

提前致谢。

【问题讨论】：

div内是否只有一个子元素锚标签？
@AmitVerma 不，这只是一个例子，但我可以设置 id 或类名
您的意思是从 div 中删除 onclick 并将其位置转移到 a href？
@Kinglish 我的意思是把<a>标签的href值放在点击href上。例如在本例中，onclick div 将是：<div onclick="location.href=''example;" style="cursor: pointer;">
@cerealikaeme 这应该发生在脚本的开头吗？如果是这样，为什么不在两个地方输入相同的地址？

标签： javascript html jquery ajax onclick

【解决方案1】：

JavaScript 会是这样的

 function setLocation(divObj) {
            var anchorTag = divObj.getElementsByTagName("a")[0];

            console.log(anchorTag);

            window.location.href = anchorTag.href;
        }

HTML 将是

<div onclick="setLocation(this);" style="cursor: pointer;">
        <div class="item">
            <a href="example" class="btn">Buy</a>
        </div>
</div>

【讨论】：

【解决方案2】：

您可以通过将事件侦听器添加到 div 并修改事件中的 a 标签来做到这一点。

注意ev.target实际上指向<a>标签本身，而不是<div>。

<div id="buy-div" style="cursor: pointer;">
    <div class="item">   
        <a class="btn" href="example">Buy</a>                
    </div>  
</div>

const buyDivEl = document.getElementById('buy-div');
buyDivEl.addEventListener('click', ev => {
    ev.target.href = '';
});

【讨论】：

【解决方案3】：

您可以为应该继承其中锚链接的 href 的任何 div 创建一个类并循环遍历它们，创建侦听器并获取 href。

window.addEventListener('load', () => {
  document.querySelectorAll('.inheritor').forEach(el => {
    el.addEventListener('click', e => {
      window.location.href = e.target.querySelector('a').getAttribute('href');
    })
  })
})

.inheritor {
  cursor: pointer;
  padding: 15px;
  background: #f0f0f0;
}

<div class='inheritor'>
  <div class="item">
    <a href="example" class="btn">Buy</a>
  </div>
</div>

【讨论】：

OP 正在尝试将a 的href 设置为不导航页面。
你能告诉我有什么区别吗？ onclick='location.href=""' vs element.addEventListener('click'... 他们都是事件监听器。这段代码在点击时引用href实际上更好，因为href可能会改变。
问题是window.location.href = ...。您正在浏览页面，OP 只想在 a 标签上设置一个属性。这些是非常不同的事情。
window.location.href 的目的是导航页面。抱歉，我只看到语义上的差异，而不是功能上的差异。 OP 说他们希望将 href 值应用于 div onclick - 而不是相反。
问题和 cmets 表示希望在标签上设置属性，而不是像您一样导航页面。不过，如果他们发现您的答案有用，我想这就是他们想要实现的目标。干杯。

【解决方案4】：

如果我理解了你的问题，你可能想做这样的事情：

const myDiv = document.getElementById("myDivId");

const prevOnClickAttr =  myDiv.getAttribute("onclick")
// formatting in order to insert the anchors attribute inside the string value more easly
.split("=")[0]+"='";

console.log("previous onclick: ", myDiv.getAttribute("onclick"));

const onClickToAdd = myDiv.getElementsByTagName("a")[0].getAttribute("href")
// closing the string value here
+"';";

myDiv.setAttribute( "onclick", prevOnClickAttr + onClickToAdd );

console.log("new onclick div's attribute: ",myDiv.getAttribute("onclick"));

<div id="myDivId" onclick="location.href='';" style="cursor: pointer;">
    <div class="item">   
        <a href="#myDivId" class="btn">Buy</a>                
    </div>  
</div>

当然，您可能更喜欢将 javascript 代码包装到一个函数中，以防万一您想多次重复使用它

【讨论】：