Question

<div id="price">
    <a href="http://example.com/<?php echo $_GET['Path'];?>&sort=3a">Price Up</a> 
    <a href="http://example.com/<?php echo $_GET['Path'];?>&sort=3d">Price Down</a>
</div>
<div id="name">
    <a href="http://example.com/<?php echo $_GET['Path'];?>&sort=2a">Name Up </a> 
    <a href="http://example.com/<?php echo $_GET['Path'];?>&sort=2d">Name Down </a>
</div>

当用户点击价格上涨时，应显示价格下降，并应隐藏价格上涨，反之亦然。同样，对于名称升级和名称缩小。

为什么这不起作用？

$("#price a,#name a").eq(1).hide();

Answer 1

您是否尝试过使用.toggle()。

$("#price a").toggle(); $("#name a").toggle();

http://api.jquery.com/toggle/

Answer 2

首先，这不起作用：

$("#price a,#name a").eq(1).hide();

因为'#price a, #name a'匹配四个元素，然后eq(1)选择四个中的第二个（eq使用零基索引），因此只有降价才会被隐藏。如果您想隐藏向下链接，那么您需要:eq selector：

$('#price a:eq(1), #name a:eq(1)').hide();

要切换它们，您只需要在所有<a>元素上使用简单的click处理程序：

$('#price a, #name a').click(function() {
    $(this).hide().siblings().show();
    return false;
});

siblings调用是一种简单的方法，可以使所有元素与this处于同一级别，而不会在列表中包含this。如果您的<div>包含您感兴趣的<a>元素以外的内容，则需要稍微改变一下。

演示：http://jsfiddle.net/ambiguous/xwB2b/

更新评论：如果您需要将链接保留为链接，但也包含某种显示/隐藏切换，那么您将需要另一个控件（或者您的用户会讨厌您尝试让一个控制做两件事）。像这样：

<div id="price">
    <button class="flipper">Flip</button>
    <a href="http://example.com/<?php echo $_GET['Path'];?>&sort=3a">Price Up</a> 
    <a href="http://example.com/<?php echo $_GET['Path'];?>&sort=3d">Price Down</a>
</div>
<div id="name">
    <button class="flipper">Flip</button>
    <a href="http://example.com/<?php echo $_GET['Path'];?>&sort=2a">Name Up </a> 
    <a href="http://example.com/<?php echo $_GET['Path'];?>&sort=2d">Name Down </a>
</div>

而且：

$('#price a:eq(1), #name a:eq(1)').hide();
$('.flipper').click(function() {
    $(this).siblings().toggle();
});

演示：http://jsfiddle.net/ambiguous/CAAan/

您可以按照自己想要的方式设置<button>的样式。

Answer 3

“价格下降”的href值有一个错字。

$("#price a,#name a")返回四个链接，因此eq（1）将获得隐藏的“降价”链接。

因此，对于价格和名称，您需要单独编写脚本。

如何用jquery交换它？

3 个答案: