Question

我正在建立一个菜单，其中一侧有标签，另一侧有相关的标签。当我将鼠标悬停在一个li元素上时，它会显示其相对li的内容并隐藏任何之前的内容。
问题是我的主题加载相同的菜单两次，一个移动和一个桌面，因此当我调用我的模板部分时，它也加载相同的代码两次，因此相同的脚本最终不再工作。
因此，我试图找到一个解决方案，让我在同一页面上运行两次或更多相同的脚本;我认为每次运行时我都可以使用一个增量变量，但是不起作用 JS：

<script>
jQuery(document).ready(function( this ($) ) {
$('#cbi-main-menu-left li').on("mouseover", function() {
     $("#" + $(this).data("menucbi")).show();
     $("#" + $(this).data("menucbi")).siblings().hide();
    });
});  
</script>

我把这个脚本放在我正在菜单中调用的PHP模板部分中谢谢！

Answer 1

你不应该把这个javascript放到模块中，但更像是一个单独的javascript文件（或现有的），作为一个真正的函数，而不是一个匿名的。

所以你可以这样做：

$('#cbi-.....').on('mouseover', myCoolFunction);

function myCoolFunction() {
    $('#' ....).data("menucbi")).show();
    // the rest..
};

如果你把它放到模块中会破坏可重用模型的目的，因为你将覆盖内容或使用jQuery和mouseover事件，你甚至会在事件链中添加另一个事件，这将触发事件两次在鼠标悬停！

在同一网页上运行相同的Js脚本两次或更多次

1 个答案: