1

在我看来，我有以下 jquery：

$(document).ready(function() {
    $(function() {
        $('#link1').click(function() {
            $('#link2').show();
            $('#link1').hide();
            $('#frame').attr('src', 'http://google.com/');
        });
    });
});

$(document).ready(function() {
    $(function() {
        $('#link2').click(function() {
            $('#link1').show();
            $('#link2').hide();
            $('#frame').attr('src', 'http://yahoo.com/');
        });
    });
});

在页面加载时，link2设置为隐藏。jQuery所做的是：当点击带有id的链接时link1，它会显示带有id的链接link2并隐藏自己。反之亦然。

我的问题是我的 jQuery 代码似乎仍然可以简化。有没有其他方法可以用更简单的版本做我想做的事？谢谢您的帮助！

工作示例：http: //jsfiddle.net/cuJBm/

4

3 回答 3

3 
$(document).ready(function() {
    $(function() {
      var linkSet = $('#link1').add('#link2')
      linkSet.click(function() {
        linkSet.toggle();
      });
    });
});

add 方法允许您将不同的选择器添加到匹配器集，从而同时绑定两个点击。通过将构造的集合保存到一个变量 ( linkSet)，它使您不必遍历 DOM 两次。

这里唯一的两个假设是

1）在初始状态下只有一个可见。

2) id 结构是有意义的，有用的，类是不够的。

http://jsfiddle.net/cuJBm/1/

回答关于设置属性的第二个问题#frame。有很多方法可以做到这一点。也许最简单的方法是将以下内容添加到您的 .click 处理程序中（在 .click 之后toggle）。

if ($(this).attr('id')=='link1'){
    $('#frame').attr('src', 'www.google.com');
} else if ($(this).attr('id')=='link2'){
    $('#frame').attr('src', 'www.yahoo.com');
}

就个人而言，我可能会为您的链接元素添加一个自定义属性，例如：

<a id='link1' iframe-source='www.google.com'>
<a id='link2' iframe-source='www.yahoo.com'>

然后：（再次，就在 之后toggle）：

source = $(this).attr('iframe-source');
$('#frame').attr(src, source);

保存 source if 的原因是，如果您尝试进入$(this)on .attr，$('frame')它将（一如既往）返回当前匹配的元素，即$('#frame')。

或者（与上述方法非常相似），您可以使用链接的 innerHTML。例如：

<a id='link1'>link1<span style="display:none">www.google.com</span></a>
<a id='link2'>link2<span style="display:none">www.yahoo.com</span></a>

然后：（再次，就在切换之后）：

source = $(this).find('span').text();
$('#frame').attr(src, source);

就我个人而言，我不喜欢最后一种方法，因为它会污染 DOM 结构，导致渲染时间稍微贵一些，并且（在我看来）代码可读性较差。实际上，这三种方法都可以正常工作。

于 2013-08-06T06:48:33.453 回答
1 
<p class="link" style="display:none;" data-link="http://google.com/">sfdf</p>
<p class="link" data-link="http://yahoo.com/">ee</p>

$('.link').click(function() {
    $('.link').toggle();
    $('#frame').text($(this).data("link"));
  });

jsfiddle：http: //jsfiddle.net/xqDus/1/

于 2013-08-06T06:49:24.893 回答
1

使用 jQuery切换（）

只需添加这个

<a href="http://google.com/" target="frame" id="link1"> Google </a>
<a href="http://yahoo.com/" target="frame" id="link2"> Yahoo </a>

目标是框架的 id

$(function() {
  $('#link1, #link2').click(function() {
    $('#link1, #link2').toggle();
  });
});
于 2013-08-06T06:52:29.027 回答