如何用Javascript替换鼠标悬停时的所有href元素

How to replace all href elements when mouseovers with Javascript

本文关键字：href 元素 悬停 何用 Javascript 替换 鼠标      更新时间：2023-09-26

当用Javascript和jQuery鼠标悬停图像caladd.gif时，我想将所有href="javascript:void(0)"替换为href="http://google.com"。

摘要：这意味着每当鼠标在图像上时，它都会触发Javascript或jQuery将href更改为另一个链接。

HTML:

<div id="AsynchronousViewDefault_CalendarView">
<div class="ms-acal-header">
<div>
    <table class="ms-acal-month">
    </table>
    <div class="ms-acal-vlink">
        <table>
            <tbody>
                <tr>
                    <td><a href="javascript:void(0)" title="Add" evtid="new_item">
                        <img border="0" src="/_layouts/images/caladd.gif">Add</a></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

Javascript：

$(document).ready(function () {
        var abc = $("#AsynchronousViewDefault_CalendarView").find('a[title="Add"][evtid="new_item"]').hover(
          function () {
              $(this).attr('href', 'http://share/Lists/Calendar.aspx?P=P1');
          }
        );
    });

指定方法的主要问题是，当事件处理程序绑定到mouseover JavaScript事件时，尚未生成日历视图。

建议您考虑一种不同的方法，在这种方法中，您可以自定义Calendar控件的行为和属性，而不是修改Calendar的DOM。

如何自定义日历新项目链接

sp.ui.applicationpages.calendar.js:中定义了New Item链接的渲染模板

<a evtid='"new_item'" title='"{1}'" href='"javascript:void(0)'"/><span class='"ms-addcolumn-span'"><img class='"ms-addcolumn-icon'" border='"0'" src='"{2}'"/></span>{0}</a>

呈现模板可以被覆盖，下面的代码示例演示如何将Calendar New Item href属性设置为https://www.google.com/calendar/render

function setNewItemUrl(url)
{
   //get New Item template      
   var newItemTemplate = SP.UI.ApplicationPages.CalendarVirtualItem.prototype.$7l_0;
   //override template
   SP.UI.ApplicationPages.CalendarVirtualItem.prototype.$7l_0 = newItemTemplate.replace('javascript:void(0)',url);
}
function registerAddItemLink() 
{           
   setNewItemUrl('https://www.google.com/calendar/render');
}
ExecuteOrDelayUntilScriptLoaded(registerAddItemLink,"SP.UI.ApplicationPages.Calendar.js");

用法：

  • 在日历页面上添加CEWP
  • 将指定的JavaScript代码插入Content属性

注意：已在SharePoint 2013 中进行了测试

相关文章：