Question

此行为发生在为基于计算机的培训而构建的Intranet网站上。我正在使用一个函数来改变＆＃34; id＆＃34;在一个页面上动态使用jquery的div的名称。

$('#frameTextBg').attr('id','frameTextBg-horz');

工作正常。问题是，当我导航到另一个页面时，此功能将继续运行，任何名为#frameTextBg的页面都将重命名为frameTextBg-horz。

我使用jquery导航到其他页面以在div中加载页面。注意"var NextPage"在每个页面中由创作程序html export：

声明

function NextPage() {
   $('#content').load(nextPage) 
};

如何阻止此功能在其他页面上运行？

提前致谢。

标记

以下是与＆＃34;外部＆＃34;相关的html标记的部分内容。将在名为#content的div中加载每个页面的容器。

...
<body class="mainBody" onLoad="resizeCBT();">
    <div id="container">
        <div id='content'></div>
        <div id="footer">
            <p id="footerP">LessonName</p>
            <div id="footerPG">00 of 00</div>
            <div id="footerNav"></div>
            <div id="footerID" style="display:block" ></div>
        <div id="control" name="control"><div>
    </div>
<script type="text/javascript">
$('#content').load("Menu-0.htm"); 

$( "#control" ).load( "interface/control.htm #select1" );

document.getElementById('control').style.display="none";

</script>
</body>
...

接下来是运行重命名id的函数的单个页面的部分标记：

...
<script type="text/javascript">
  var frame_id = 95675
  var graphic_1 = "20.png"
  var graphic_2 = ""
  var nextPage = "a.htm"
  var prevPage = "c.htm"
  var thisPage = "b.htm"
  var menuTitle = ""
  var frameTitle = "title"
  var sequence = 20
  var totalFrames = 26
  var manifestName = "No_Flash"
  var instructText = ""
  var audioFilename = ""

function runAfterPgLoad()   {
$('#frameTextBg').attr('id','frameTextBg-off');
}

</script>
</head>
<body>
<div id="header">
    <div id="header1"><h1 id="header1t">headerOne</h1></div>
    <div id="header2"><h1 id="header2t">HeaderTwo</h1></div>
    <div id="header3"></div>
</div>

<div id="GRAPHIC"><img src="20.png"></div>
<div id="TEXT" class="text">Text here.</div>

<div id="frameTextBg"></div>

<script type="text/javascript">
function NextPage() {
    $('#content').load(nextPage) 
};

function PrevPage() {
    $('#content').load(prevPage)
};


document.getElementById('footerID').innerHTML = frame_id;
document.getElementById('footerPG').innerHTML = sequence + " of " + totalFrames;

if (typeof runAfterPgLoad == 'function') { 
  runAfterPgLoad(); 
}

</script>
</body>
</html>

其他页面没有此功能：

function runAfterPgLoad()   {
$('#frameTextBg').attr('id','frameTextBg-off');
}

请注意，某些标记已被省略，因为此材料无法公开。很抱歉，如果我不小心切断了任何相关标记。

Answer 1

您正在使用ajax替换页面的PARTS。因为您没有重新加载整个页面，或者使用正常的＆＃34;点击转到下一页＆＃34;系统，该功能将继续工作，直到你告诉它停止，例如。

var stop_it_already = false;
if (!stop_it_already) {
    $('#frameTextBg').attr('id','frameTextBg-horz');
}

Answer 2

这不是一个明确的答案，因为我仍然不清楚NextPage的确切调用方式。

您永远不应该使用具有相同id的不同HTML元素。由于这不是你想要做的事情，我甚至不确定HTML的规范说明会发生什么，所以你的页面在不同的浏览器上可能会有不同的表现。 $('#frameTextBg')代表所有frameTextBg元素吗？或者浏览器只让它成为一个元素，如果是，那么哪一个？

我曾经在一个项目上工作，该项目涉及在另一个网站中嵌入许多不完全相同的网站副本。我们必须将所有id属性更改为CSS类。然后，假设所有frameTextBg元素都位于网站的不同部分，我们可以编写$('.section-1 .frameTextBg')，$('.section-2 .frameTextBg')等。

注意"var NextPage"由创作程序html export
在每个页面中声明

我的客户端javascript有点生疏，但我认为无论如何，任何不在函数定义中的声明都会进入全局范围。这可能会导致运行NextPage的最新副本而不是之前的副本出现问题。（但我无法分辨，因为我没有看到调用NextPage的位置。）

你说你正在重新加载页面的一部分。您真的需要使用<script>元素重新加载零件吗？

用于更改ID名称的Jquery函数继续在其他页面上运行，即使我不希望它

2 个答案: