Question

我有8个链接，所有这些都需要在点击时显示div。我希望一次只显示1个div，所以当点击新链接时，当前显示的div将被隐藏，并显示一个新的div。到目前为止，我有一个jQuery解决方案，但它很难看。是否有更简单/更正确的方法来实现我想要的目标？

<div>
<a href="#" class="link">Click Link</a><br />
<a href="#" class="link2">Click Link 2</a><br />
<a href="#" class="link3">Click Link 3</a><br />
<a href="#" class="link4">Click Link 4</a><br />
<a href="#" class="link5">Click Link 5</a><br />
<a href="#" class="link6">Click Link 6</a><br />
<a href="#" class="link7">Click Link 7</a><br />
<a href="#" class="link8">Click Link 8</a><br />
 <div class="testVid hideDiv" style="background:pink; height:200px">Test Vid Div<br /><br /><span class="close">CLOSE</span></div>
<div class="testVid2  hideDiv" style="background:pink; height:200px">Test Vid Div 2<br /><br /><span class="close2">CLOSE 2</span></div>
<div class="testVid3 hideDiv" style="background:pink; height:200px">Test Vid Div 3<br /><br /><span class="close3">CLOSE 3</span></div>
<div class="testVid4  hideDiv" style="background:pink; height:200px">Test Vid Div 4<br /><br /><span class="close4">CLOSE 4</span></div>
<div class="testVid5 hideDiv" style="background:pink; height:200px">Test Vid Div 5<br /><br /><span class="close5">CLOSE 5</span></div>
<div class="testVid6 hideDiv" style="background:pink; height:200px">Test Vid Div 6<br /><br /><span class="close6">CLOSE 6</span></div>
<div class="testVid7 hideDiv" style="background:pink; height:200px">Test Vid Div 7<br /><br /><span class="close7">CLOSE 7</span></div>
<div class="testVid8 hideDiv" style="background:pink; height:200px">Test Vid Div 8<br /><br /><span class="close8">CLOSE 8</span></div>

$(document).ready(function(){
    $("a.link").click(function(){
        $(".testVid").show();
        $(".testVid2").hide();
        $(".testVid3").hide();
        $(".testVid4").hide();
        $(".testVid5").hide();
        $(".testVid6").hide();
        $(".testVid7").hide();
        $(".testVid8").hide();
    });
    $(".close").click(function(){
        $(".testVid").hide();
        });

    $("a.link2").click(function(){
        $(".testVid2").show();
        $(".testVid").hide();
        $(".testVid3").hide();
        $(".testVid4").hide();
        $(".testVid5").hide();
        $(".testVid6").hide();
        $(".testVid7").hide();
        $(".testVid8").hide();
    });
    $(".close2").click(function(){
        $(".testVid2").hide();
        });

    $("a.link3").click(function(){
        $(".testVid3").show();
        $(".testVid2").hide();
        $(".testVid").hide();
        $(".testVid4").hide();
        $(".testVid5").hide();
        $(".testVid6").hide();
        $(".testVid7").hide();
        $(".testVid8").hide();
    });
    $(".close3").click(function(){
        $(".testVid3").hide();
        });

    $("a.link4").click(function(){
        $(".testVid4").show();
        $(".testVid2").hide();
        $(".testVid3").hide();
        $(".testVid").hide();
        $(".testVid5").hide();
        $(".testVid6").hide();
        $(".testVid7").hide();
        $(".testVid8").hide();
    });
    $(".close4").click(function(){
        $(".testVid4").hide();
        });

    $("a.link5").click(function(){
        $(".testVid5").show();
        $(".testVid2").hide();
        $(".testVid3").hide();
        $(".testVid4").hide();
        $(".testVid").hide();
        $(".testVid6").hide();
        $(".testVid7").hide();
        $(".testVid8").hide();
    });
    $(".close5").click(function(){
        $(".testVid5").hide();
        })

    ;$("a.link6").click(function(){
        $(".testVid6").show();
        $(".testVid2").hide();
        $(".testVid3").hide();
        $(".testVid4").hide();
        $(".testVid5").hide();
        $(".testVid").hide();
        $(".testVid7").hide();
        $(".testVid8").hide();
    });
    $(".close6").click(function(){
        $(".testVid6").hide();
        });

    $("a.link7").click(function(){
        $(".testVid7").show();
        $(".testVid2").hide();
        $(".testVid3").hide();
        $(".testVid4").hide();
        $(".testVid5").hide();
        $(".testVid6").hide();
        $(".testVid").hide();
        $(".testVid8").hide();
    });
    $(".close7").click(function(){
        $(".testVid7").hide();
        });

    $("a.link8").click(function(){
        $(".testVid8").show();
        $(".testVid2").hide();
        $(".testVid3").hide();
        $(".testVid4").hide();
        $(".testVid5").hide();
        $(".testVid6").hide();
        $(".testVid7").hide();
        $(".testVid").hide();
    });
    $(".close8").click(function(){
        $(".testVid8").hide();
        });
    $(".hideDiv").css('display', 'none');
});

Fiddle Here

Answer 1

每个div都应该有一个类和一个id。该类应该用于对您拥有的div类型进行分组。 id应该是每个div的唯一。

所以，如果你有一些包含汽车照片的div和一些包含松鼠照片的div，你应该有两类div？

<div class="PhotosCars" id="Car1"></div>
<div class="PhotosCars" id="Car2"></div>
<div class="PhotosCars" id="Car3"></div>
<div class="PhotosSquirrels" id="Squirrels1"></div>
<div class="PhotosSquirrels" id="Squirrels2"></div>
<div class="PhotosSquirrels" id="Squirrels3"></div>

// hide squirrels
$(".PhotosSquirrels").hide();

// hide cars
$(".PhotosCars").hide();

// show single photo
$("#Car3").show();

Answer 2

使用jQuery选择器。我将所有类属性更改为ID属性，并将1添加到没有数字的那些属性。这是小提琴。

http://jsfiddle.net/BLXWS/7/

Answer 3

为所有项目分配一个公共类
将点击处理程序同时附加到所有$(".commonClass").click(..)
隐藏所有（使用相同的选择器）并仅显示当前的$(this)

Answer 4

我updated your fiddle有关于链接和div的公共类，并且使用id更改了数字（因为它们无论如何都是唯一的）。你可以这样做：

$(".showlink").click(function(e){
  e.preventDefault();
  $(".testVid").hide()
  $("#vid"+$(this).attr("id").replace("link","")).show();    
});

Answer 5

解决方案，无需更改html中的任何内容：

$("a").click(function(){
    $('div[class^="testVid"]').hide();
    $('div[class="testVid'+ $(this).attr('class').replace(/link/, '') +'"]').show();
});

$('span[class^="close"]').click(function() {
    $(this).parent().hide();
});

我建议你看看jQuery Selectors，这可以挽救你的生命。

Answer 6

使用您想要连接/处理的元素具有的属性/值。

在您的情况下，您的链接和div一起关联的是其班级名称的一部分（链接号和div号;它们隐藏在a和div班级名称link1 --> testVid1中）。

这也是你的链接相关的内容（在这种情况下，你专注于他们的类名的第一部分）。所以你不需要每个人都有点击功能，只需要一个：

// this selector selects all a tags of which class attribute contains value of "link"
$('a[class*="link"]')

关闭你的div的跨度也是如此：

$('span[class*="close"]')

所以你的javascript / jquery代码（不需要更改html代码）看起来像这样：

   $(function() {
    $('a[class*="link"]').click(function(e){
       // prevent default behaviour of anchor tag
       e.preventDefault();
       //reset current selection (hide all divs)
       $('div[class*="testVid"]').hide();
       // get clicked anchor tag number
       $this = ($(this).attr("class")).replace("link", "testVid");
       // find and display div that is related to clicked a element
       $('.'+$this).show();
     });

     $('span[class*="close"]').click(function(e){
       // prevent default behaviour of anchor element
       e.preventDefault();
       //get parent element of clicked anchor element and hide it
       $(this).parent('div').hide();
     });

    });

在像你这样的情况下，jQuery非常有用，特别是selectors。

显示/隐藏多个div的更好方法是什么？

6 个答案: