Question

由于没有使用javascript的经验，我可以使用此处显示的示例http://clarkupdike.blogspot.com/2009/03/basic-example-of-jquerys-uidialog.html打开Google地图。为了在同一页面上为不同的地图使用相同的脚本，我更改了第二个脚本上的一些参数，以区别于第一个脚本。

这是第一个脚本的代码......

<a href="" onclick="return showDialog()">Get first map!</a>

<div id="dialog_a" title="First Map">
    <iframe id="iframe_a" width="100%" height="100%"
    marginWidth="0" marginHeight="0" frameBorder="0" scrolling="auto"
    title="Dialog Title"></iframe>
</div>

<script type="text/javascript">

function showDialog(){
   $("#dialog_a").dialog("open");
   $("#iframe_a").attr("src","https://www.google.com/maps/embed/v1/place?q=409%20Bullard%20Avenue%2C%20Clovis%2C%20CA%2C%20United%20States&key=AIzaSyBNO4HD3H0XP_DnX_V8AHPrtpUPK5WrDgc");
   return false;
}
$(document).ready(function() {
   $("#dialog_a").dialog({
           autoOpen: false,
           modal: true,
           height: 500,
           width: 500
       });
});
</script>

这是第二个脚本......

<a href="" onclick="return showDialog()">Get second map!</a>

<div id="dialog_b" title="Second Map">
    <iframe id="iframe_b" width="100%" height="100%"
    marginWidth="0" marginHeight="0" frameBorder="0" scrolling="auto"
    title="Dialog Title"></iframe>
</div>

<script type="text/javascript">

function showDialog(){
   $("#dialog_b").dialog("open");
   $("#iframe_b").attr("src","https://www.google.com/maps/embed/v1/place?q=401%20Clovis%20Avenue%2C%20Clovis%2C%20CA%2C%20United%20States&key=AIzaSyBNO4HD3H0XP_DnX_V8AHPrtpUPK5WrDgc");
   return false;
}
$(document).ready(function() {
   $("#dialog_b").dialog({
           autoOpen: false,
           modal: true,
           height: 500,
           width: 500
       });
});
</script>

第二个代码正在执行，而不是第一个。我理解为什么会发生这种情况但是我无法弄清楚（或者在堆栈溢出上找到类似的例子）如何区分一个脚本与另一个脚本以避免这种冲突。

我的猜测是我必须为每个脚本创建函数或showDialog（），但我无法弄清楚如何解决这个问题。

这是一个在线示例...

http://johncrockford.com/test/

Answer 1

每个锚标记正在执行您已定义两次的函数。优先级取决于最接近标记末尾的函数。

最简单的解决方案是简单地为函数赋予不同的名称，但是，您可以将它们重构为一个：

function showDialog(dialogId, iframeId, url){
   $(dialogId).dialog("open");

   $(iframeId).attr("src", url);
   return false;
}

showDialog("#dialog_b", "#iframe_b", "https://www.google.com/maps/embed/v1/place?q=401%20Clovis%20Avenue%2C%20Clovis%2C%20CA%2C%20United%20States&key=AIzaSyBNO4HD3H0XP_DnX_V8AHPrtpUPK5WrDgc");

Answer 2

变量showDialog等于为什么并向您显示错误，而您只需要调用一次和内部函数$ (document) .ready (function ()即可实现您想要的所有内容，否则会导致网页显示缓慢

抱歉我的英语使用google翻译为especificarte以解决

我希望，我能为你提供帮助

＆＃13;

function showDialogA(){
   $("#dialog_a").dialog("open");
   $("#iframe_a").attr("src","https://www.google.com/maps/embed/v1/place?q=409%20Bullard%20Avenue%2C%20Clovis%2C%20CA%2C%20United%20States&key=AIzaSyBNO4HD3H0XP_DnX_V8AHPrtpUPK5WrDgc");
   return false;
}


function showDialogB(){
   $("#dialog_b").dialog("open");
   $("#iframe_b").attr("src","https://www.google.com/maps/embed/v1/place?q=401%20Clovis%20Avenue%2C%20Clovis%2C%20CA%2C%20United%20States&key=AIzaSyBNO4HD3H0XP_DnX_V8AHPrtpUPK5WrDgc");
   return false;
}

$(document).ready(function() {
   $("#dialog_a").dialog({
           autoOpen: false,
           modal: true,
           height: 500,
           width: 500
       });

    $("#dialog_b").dialog({
           autoOpen: false,
           modal: true,
           height: 500,
           width: 500
       });
});

＆＃13;

<link href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

<a href="" onclick="return showDialogA()">Get first map!</a>

<div id="dialog_a" title="First Map">
    <iframe id="iframe_a" width="100%" height="100%"
    marginWidth="0" marginHeight="0" frameBorder="0" scrolling="auto"
    title="Dialog Title"></iframe>
</div>



<br /><br /><br /><br />

<a href="" onclick="return showDialogB()">Get second map!</a>

<div id="dialog_b" title="Second Map">
    <iframe id="iframe_b" width="100%" height="100%"
    marginWidth="0" marginHeight="0" frameBorder="0" scrolling="auto"
    title="Dialog Title"></iframe>
</div>

＆＃13;

冲突的jQuery对话框脚本

2 个答案: