Question

我的观点中有以下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的作用是：当点击标识为link1的链接时，它会显示标识为link2的链接并隐藏自身。反之亦然。

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

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

Answer 1

$(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处理程序中（在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);

保存来源的原因是，如果您尝试在$(this) .attr内获取$('frame')，它将（一如既往）返回当前匹配的元素，即{{ 1}}。

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

$('#frame')

然后:(再次，在切换之后）：

<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>

就个人而言，我不喜欢这最后一种方法，因为它污染了DOM结构，导致渲染时间稍微昂贵，而且（在我看来）代码可读性较差。实际上，这三种方法都运行得很好。

Answer 2

<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/

Answer 3

使用jQuery toggle()

只需添加此

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

target是框架的id

$(function() {
  $('#link1, #link2').click(function() {
    $('#link1, #link2').toggle();
  });
});

jquery显示另一个链接然后隐藏自己

3 个答案: