Question

我有三个div元素：

<div class="hide_banner" id="1"><img src="1.png"></div>
<div class="hide_banner" id="2"><img src="2.png"></div>
<div class="hide_banner" id="3"><img src="3.png"></div>

加载页面后，用户应该只看到第1个div。这是JS / jQ代码（这非常有效）：

$(document).ready(function() {
  $('.hide_banner').not('#' + 1).hide(3000);
});

用户可以通过点击此页面上的链接选择另一个横幅：

<ul class="dropdown-menu" role="menu">
  <li><a href="#1" class="show_banner">Image 1</a></li>
  <li><a href="#2" class="show_banner">Image 2</a></li>
  <li><a href="#3" class="show_banner">Image 3</a></li>
</ul>

例如在第3个链接（href =“＃3”）上点击后，id =“1”的div应隐藏，并显示id =“3”的div。我知道如何保持与PHP结合的问题，但我想用JS / jQ解决它，所以请帮忙！ ;）这是我的JS / jQ代码不起作用：

$(document).ready(function() {
  $('.hide_banner').not('#' + 1).hide(3000);
  $('a').click(function() {
    var id = $(this).attr('href');

    if(id == 1) {
        $(id).show(3000);
        $('#2').hide(3000);
        $('#3').hide(3000);

    }

    if(id == 2) {
        $(id).show(3000);
        $('#1').hide(3000);
        $('#3').hide(3000);

    }

    if(id == 3) {
        $(id).show(3000);
        $('#1').hide(3000);
        $('#2').hide(3000);

    }
  });

});

P.s。：我知道使用数字启动id的名称是不正确的;）

Answer 1

真的，这里不需要if...else逻辑，也不需要指定第一个ID - 只需使用:first：

$('.hide_banner').not(':first').hide(3000);
$('a').click(function() {
    var id = $(this).attr('href');
    $(id).show(3000);
    $('.hide_banner').not(id).hide(3000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="hide_banner" id="1">1</div>
<div class="hide_banner" id="2">2</div>
<div class="hide_banner" id="3">3</div>


<ul class="dropdown-menu" role="menu">
  <li><a href="#1" class="show_banner">Image 1</a></li>
  <li><a href="#2" class="show_banner">Image 2</a></li>
  <li><a href="#3" class="show_banner">Image 3</a></li>
</ul>

Answer 2

您已经知道如何使用jQuery not，因此请使用它来排除所选目标：

JSFiddle：http://jsfiddle.net/vk94mmv2/2/

$(document).ready(function () {
    $('.hide_banner:not(:first)').hide(3000);
    $('a').click(function () {
        var id = $(this).attr('href');
        var $show = $(id);
        $show.show(3000);
        $('.hide_banner').not($show).hide(3000);
    });
});

注意：您可以更改第一个选择器以使用:not(:first)伪选择器来选择除第一个横幅之外的所有横幅。

在点击事件后显示特定div并隐藏所有其他div

2 个答案: