[英]How to dynamically get href links and add them to an HTML element using jQuery?
我正在使用 Sharepoint Designer,HTML 是自动生成的。 它现在的工作方式是只有标签是可点击的,而它周围的 div 是不可点击的。
<ul class="dfwp-list">
<li>
<div class="item" style="cursor: pointer;">
<div class="image-area-left">
<a href="/Agencies/accounting/Pages/default.aspx"><img class="image"
src="/Agencies/PublishingImages/file-invoice-dollar.svg" title=""></a>
</div>
<div class="link-item"><a href="/Agencies/accounting/Pages/default.aspx" title="Accounting Division">Accounting
Division</a>
<div class="description"></div>
</div>
</div>
</li>
<li>
<div class="item" style="cursor: pointer;">
<div class="image-area-left">
<a href="/Agencies/air/Pages/default.aspx"><img class="image" src="/Agencies/PublishingImages/wind.svg"
title=""></a>
</div>
<div class="link-item"><a href="/Agencies/air/Pages/default.aspx" title="Air Quality Program">Air Quality
Program</a>
<div class="description"></div>
</div>
</div>
</li>
<li>
<div class="item">
<div class="image-area-left">
<a href="/Agencies/aviation/Pages/default.aspx"><img class="image"
src="/Agencies/PublishingImages/plane-departure.svg" title=""></a>
</div>
<div class="link-item"><a href="/Agencies/aviation/Pages/default.aspx" title="Aviation Department">Aviation
Department</a>
<div class="description"></div>
</div>
</div>
</li>
<li>
<div class="item" style="cursor: pointer;">
<div class="image-area-left">
<a href="/Agencies/healthcare/Pages/default.aspx"><img class="image"
src="/Agencies/PublishingImages/building.svg" title=""></a>
</div>
<div class="link-item"><a href="/Agencies/healthcare/Pages/default.aspx"
title="Broward Addiction & Recovery Center">Broward Addiction & Recovery Center</a>
<div class="description"></div>
</div>
</div>
</li>
<li>
<div class="item">
<div class="image-area-left">
<a href="/Agencies/budget"><img class="image" src="/Agencies/PublishingImages/money-bill-alt.svg" title=""></a>
</div>
<div class="link-item"><a href="/Agencies/budget" title="Budget & Management">Budget & Management</a>
<div class="description"></div>
</div>
</div>
</li>
<li>
<div class="item">
<div class="image-area-left">
<a href="/Agencies/callcenter/Pages/default.aspx"><img class="image" src="/Agencies/PublishingImages/phone.svg"
title=""></a>
</div>
<div class="link-item"><a href="/Agencies/callcenter/Pages/default.aspx" title="Call Center">Call Center</a>
<div class="description"></div>
</div>
</div>
</li>
<li>
<div class="item">
<div class="image-area-left">
<a href="/Agencies/construction/Pages/default.aspx"><img class="image"
src="/Agencies/PublishingImages/toolbox.svg" title=""></a>
</div>
<div class="link-item"><a href="/Agencies/construction/Pages/default.aspx"
title="Construction Management Division">Construction Management Division</a>
<div class="description"></div>
</div>
</div>
</li>
<li>
<div class="item">
<div class="image-area-left">
<a href="/Agencies/administrator/Pages/default.aspx"><img class="image"
src="/Agencies/PublishingImages/folder-open.svg" title=""></a>
</div>
<div class="link-item"><a href="/Agencies/administrator/Pages/default.aspx"
title="County Administrator's Office">County Administrator's Office</a>
<div class="description"></div>
</div>
</div>
</li>
<li>
<div class="item">
<div class="image-area-left">
<a href="/Agencies/econdev/Pages/default.aspx"><img class="image"
src="/Agencies/PublishingImages/chart-area.svg" title=""></a>
</div>
<div class="link-item"><a href="/Agencies/econdev/Pages/default.aspx"
title="Economic & Small Business Dev.">Economic & Small Business Dev.</a>
<div class="description"></div>
</div>
</div>
</li>
<li>
<div class="item">
<div class="image-area-left">
<a href="/Agencies/eldervets/Pages/default.aspx"><img class="image"
src="/Agencies/PublishingImages/handshake.svg" title=""></a>
</div>
<div class="link-item"><a href="/Agencies/eldervets/Pages/default.aspx"
title="Elderly & Veteran's Services Division">Elderly & Veteran's Services Division</a>
<div class="description"></div>
</div>
</div>
</li>
<li>
<div class="item">
<div class="image-area-left">
<a href="/Agencies/EmergencyManagement/Pages/default.aspx"><img class="image"
src="/Agencies/PublishingImages/ambulance.svg" title=""></a>
</div>
<div class="link-item"><a href="/Agencies/EmergencyManagement/Pages/default.aspx"
title="Emergency Management">Emergency Management</a>
<div class="description"></div>
</div>
</div>
</li>
<li>
<div class="item">
<div class="image-area-left">
<a href="/Agencies/EAP/Pages/default.aspx"><img class="image" src="/Agencies/PublishingImages/user.svg"
title=""></a>
</div>
<div class="link-item"><a href="/Agencies/EAP/Pages/default.aspx" title="Employee Assistance Program">Employee
Assistance Program</a>
<div class="description"></div>
</div>
</div>
</li>
</ul>
我正在创建一个代码来获取被点击元素的 href 并在点击时将用户定向到页面。 但是发生的事情是,当我单击它时,它会将我发送到同一页面,而不是属于单击事件的 url。
$(".item").hover(function(){
$(this).css('cursor', 'pointer');
});
$(".item").click(function(event) {
var href = $('.item a').attr('href');
window.location = href;
event.preventDefault();
});
试试这个
$(".item").hover(function(){
$(this).css('cursor', 'pointer');
});
$(".item").click(function(event) {
var href = $(this).find('a').attr('href');
window.location = href;
event.preventDefault();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.