Question

我发现自己写了几次相似的代码并且我不确定最好的方法。

我有几个div：

    <div id="gallery1">
    some content
</div>

<div id="gallery2">
    some content
</div>

<div id="gallery3">
    some content
</div>

<div id="gallery4">
    some content
</div>

<div id="gallery5">
    some content
</div>

<div id="gallery6">
    some content
</div>

我将在css中隐藏图库2 - 6，然后使用jquery显示它们，并使用以下内容：

$(document).ready(function(){


    // shows gallery 1

    $('.gallery1show').click(function(){

        // prevents link from going anywhere

        event.preventDefault();

        // shows gallery 1

        $('#gallery1').show();

        // hides other galleries

        $('#gallery2').hide();
        $('#gallery3').hide();
        $('#gallery4').hide();
        $('#gallery5').hide();
        $('#gallery6').hide();

    });


    // shows gallery 2

    $('.gallery2show').click(function(){

        // prevents link from going anywhere

        event.preventDefault();

        // shows gallery 2

        $('#gallery2').show();

        // hides other galleries

        $('#gallery1').hide();
        $('#gallery3').hide();
        $('#gallery4').hide();
        $('#gallery5').hide();
        $('#gallery6').hide();

    });


    // shows gallery 3

    $('.gallery3show').click(function(){

        // prevents link from going anywhere

        event.preventDefault();

        // shows gallery 3

        $('#gallery3').show();

        // hides other galleries

        $('#gallery1').hide();
        $('#gallery2').hide();
        $('#gallery4').hide();
        $('#gallery5').hide();
        $('#gallery6').hide();

    });


    ... etc


});

我有一种感觉，而不是使用gallery1，gallery2等我应该给每个div一个类的画廊，然后使用这个而不是在jquery中。但我不知道从哪里开始。

任何建议？

Answer 1

我会做这样的事情：

＆＃13;

var galleries = $('.gallery');
$('.show-gallery').on('click', function(e) {
  e.preventDefault();
  
  var gallery = $($(this).attr('href'));
  galleries.not(gallery).hide();
  gallery.show();
});

＆＃13;

.gallery + .gallery {display:none;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="gallery1" class="gallery">gallery 1</div>
<div id="gallery2" class="gallery">gallery 2</div>
<div id="gallery3" class="gallery">gallery 3</div>
<div id="gallery4" class="gallery">gallery 4</div>
<div id="gallery5" class="gallery">gallery 5</div>

<a href="#gallery1" class="show-gallery">Gallery 1</a>
<a href="#gallery2" class="show-gallery">Gallery 2</a>
<a href="#gallery3" class="show-gallery">Gallery 3</a>
<a href="#gallery4" class="show-gallery">Gallery 4</a>
<a href="#gallery5" class="show-gallery">Gallery 5</a>

＆＃13;

Answer 2

让所有div成为一个共同的类“画廊”并隐藏它

$(".gallery").hide();

并仅显示需要

的图库

$("#gallery1").show();

或编写代码是jQuery动态识别div以显示它的方式。

Answer 3

＆＃13;

$('.show').on('click',function() {
    $('.gallery').hide();
    $($(this).attr('href')).show();
});

＆＃13;

.gallery {
    display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#gallery1" class="show">Show gallery 1</a>
<a href="#gallery2" class="show">Show gallery 2</a>
<a href="#gallery3" class="show">Show gallery 3</a>
<a href="#gallery4" class="show">Show gallery 4</a>
<a href="#gallery5" class="show">Show gallery 5</a>
<a href="#gallery6" class="show">Show gallery 6</a>

<div id="gallery1" class="gallery"> 
    some content 1
</div>

<div id="gallery2" class="gallery">
    some content 2
</div>

<div id="gallery3" class="gallery">
    some content 3
</div>

<div id="gallery4" class="gallery">
    some content 4
</div>

<div id="gallery5" class="gallery">
    some content 5
</div>

<div id="gallery6" class="gallery">
    some content 6
</div>

＆＃13;

Answer 4

有点晚了，但这是一个有效的例子：https://jsfiddle.net/

Answer 5

猜猜你已经在那里给出了部分html代码，因此我假设它有一些按钮来触发gallery的show动作。以下是关于HTML必须如何

的假设

<div class="galleries">
  <div id="gallery1" class="gallery active">
    gallery 1    
  </div>
  <div id="gallery2" class="gallery">
    gallery 2   
  </div>
  <div id="gallery3" class="gallery">
    gallery 3   
  </div>
  <div id="gallery4" class="gallery">
    gallery 4   
  </div>
  <div id="gallery5" class="gallery">
    gallery 5    
  </div>
  <div id="gallery6" class="gallery">
    gallery 6  
  </div>
</div>

<div class="gallery-buttons">
  <button data-id="1">Gallery 1</button>  <button data-id="2">Gallery 2</button>
  <button data-id="3">Gallery 3</button>
  <button data-id="4">Gallery 4</button>
  <button data-id="5">Gallery 5</button>
  <button data-id="6">Gallery 6</button>
</div>

和css

.gallery{
  display:none;
}

.gallery.active{
  display:block;
}

和js

$('.gallery-buttons button').on('click',function(){
    var id = $(this).attr('data-id');

    $('.gallery.active').removeClass('active');
  $('.gallery[id="gallery'+id+'"]').addClass('active');
});

这是演示笔http://codepen.io/anon/pen/zGJaNM

如何在jquery中不重复自己

5 个答案: