Question

寻找高级网络开发人员关于如何为此方案实际编写可管理代码的反馈/建议。

方案

我们在网站上有各种容器链接。单击其中一个后，我们使用jQuery创建iframe并在其中加载页面。

HTML部分：（从正文开始）

    <a id="slot1" href="#0">Text</a>
    <a id="slot2" href="#0">Text</a>
    <a id="slot3" href="#0">Text</a>
    <a id="slot4" href="#0">Text</a>

    <!-- iframe content will be displayed within this div -->
    <div id="content">
    </div>

jQuery的：

    <script>
    $("#slot1").click(function(){$("#content").html('<iframe src="http://www.google.de/">');});
    $("#slot2").click(function(){$("#content").html('<iframe src="http://www.google.com/">');});
    $("#slot3").click(function(){$("#content").html('<iframe src="http://www.google.co.uk/">');});
    $("#slot4").click(function(){$("#content").html('<iframe src="http://www.google.ru/">');});
    </script>

如果列表增长，现在这会变得冗长乏味（想想＃slot57！）。如何写它更灵活和优雅？

到目前为止，我想到了定位所有插槽ID $（'[id ^ =“slot”]'）并切片索引（4）以获取实际点击的数字。但接下来如何加载正确的iframe内容！？

我被困住了。有什么想法/建议吗？

Answer 1

如果您能够进行一些标记修改，那么您可以尝试在标记中执行此操作：

<a id="slot1" href="#google.de/">Text</a>
<a id="slot2" href="#google.com/">Text</a>
<a id="slot3" href="#google.co.uk/">Text</a>
<a id="slot4" href="#google.ru/">Text</a>

然后你可以使用这个jQuery代码：

$('a[id^="slot"]').on('click', function(e){
    e.preventDefault(); // stops the jump of anchor
    $("#content").html('<iframe src="http://www.'+ $(this).attr('href').slice(1) +'">');
});

或者如果您使用的是 html5 ，那么请使用data-*属性来提供网址：

<a id="slot1" href="#0" data-url="http://www.google.de/">Text</a>
<a id="slot2" href="#0" data-url="http://www.google.com/">Text</a>
<a id="slot3" href="#0" data-url="http://www.google.co.uk/">Text</a>
<a id="slot4" href="#0" data-url="http://www.google.ru/">Text</a>

然后你可以使用这个jQuery代码：

$('a[id^="slot"]').on('click', function(e){
    e.preventDefault(); // stops the jump of anchor
    $("#content").html('<iframe src="http://www.'+ $(this).data('url') +'">');
});

Fiddle

Answer 2

你可以尝试这个

<强> HTML

<a class='slots' href="http://www.google.de/">Text1</a>
    <a class='slots'href="http://www.google.com/">Text2</a>
    <a class='slots'  href="http://www.google.uk/">Text3</a>
    <a  class='slots' href="http://www.google.ru/">Text4</a>

    <!-- iframe content will be displayed within this div -->
    <div id="content">
    </div>

<强> JS

  $('a').click(function(e){
   $("#content").html('<iframe src='+$(this).attr('href')+'>');
    e.preventDefault();
});

<强> DEMO HERE

jQuery：点击加载iframe - 如何编写可管理的代码？

2 个答案:

Fiddle