javascript - 鼠标悬停时如何替换所有href元素答案

【问题标题】：How to replace all href elements when mouseovers with Javascriptjavascript - 鼠标悬停时如何替换所有href元素
【发布时间】：2014-04-23 07:54:13
【问题描述】：

当鼠标悬停图像 caladd.gif 用 Javascript 和 jQuery 时，我想将所有 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');
          }
        );
    });

【问题讨论】：

在这里工作正常：jsfiddle.net/nALMw
它也适用于我。你可能有一个与 JS 或 iframe 行为冲突的插件吗？
@skzryzg, **@Anton：这在我的 SharePoint 中不起作用...

标签： javascript jquery html sharepoint sharepoint-2010

【解决方案1】：

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

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

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

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

<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 中测试

【讨论】：