Question

我觉得我的脚本真的是多余的，可能写的方式更好。如果有人能给我一些关于如何更好地实现这一点的提示或想法，我将非常感激。基本上是一个非常简单的幻灯片。

 $('.projectview .designinfo').hide();
 $('.projectview .buildinfo').hide();
 $('.projectview .launchinfo').hide();
 $('.projectview .growinfo').hide();


 $('.thumbs ul li.plan').bind('click',
   function() {
       $('.projectview .designinfo, .projectview .buildinfo, .projectview .launchinfo, .projectview .growinfo').fadeOut();
       $('.projectview .planinfo').fadeIn();
   });
 $('.thumbs ul li.design').bind('click',
   function() {
       $('.projectview .planinfo, .projectview .buildinfo, .projectview .launchinfo, .projectview .growinfo').fadeOut();
       $('.projectview .designinfo').fadeIn();
   });
 $('.thumbs ul li.build').bind('click',
   function() {
       $('.projectview .planinfo, .projectview .designinfo, .projectview .launchinfo, .projectview .growinfo').fadeOut();
       $('.projectview .buildinfo').fadeIn();
   });
 $('.thumbs ul li.launch').bind('click',
   function() {
       $('.projectview .planinfo, .projectview .designinfo, .projectview .buildinfo, .projectview .growinfo').fadeOut();
       $('.projectview .launchinfo').fadeIn();
   });
 $('.thumbs ul li.grow').bind('click',
   function() {
       $('.projectview .planinfo, .projectview .designinfo, .projectview .buildinfo, .projectview .launchinfo').fadeOut();
       $('.projectview .growinfo').fadeIn();
   });

这是html

<section class="thumbs">
        <ul>
          <li class="plan">
            <img src="images/new/plan.jpg" alt="plan" class="serviceicon">
          </li>
          <li class="design">
            <img src="images/new/design.jpg" alt="design" class="serviceicon">
          </li>
          <li class="build">
            <img src="images/new/build.jpg" alt="build" class="serviceicon">
          </li>
          <li class="launch">
            <img src="images/new/launch.jpg" alt="launch" class="serviceicon">
          </li>
          <li class="grow">
            <img src="images/new/grow.jpg" alt="grow" class="serviceicon">
          </li>
        </ul>
      </section>
      <section class="projectview">
        <section class="planinfo"><img src="images/new/planinfo.jpg" alt="blog" class="planinfo"></section>
        <section class="designinfo"><img src="images/new/designinfo.jpg" alt="blog" class="designinfo"></section>
        <section class="buildinfo"><img src="images/new/buildinfo.jpg" alt="blog" class="buildinfo"></section>
        <section class="launchinfo"><img src="images/new/launchinfo.jpg" alt="blog" class="launchinfo"></section>
        <section class="growinfo"><img src="images/new/growinfo.jpg" alt="blog" class="growinfo"></section>
      </section>

Answer 1

是的。

$('.projectview').children().hide();
$('.projectview').children(".planinfo").show();

$('.thumbs ul li').click(function(){
    var thumb = $(this).attr('class');
    var partner = $('.' + thumb + 'info');
    $('.projectview').children().fadeOut();
    partner.fadeIn();
});

我还没有对此进行测试，但它应该有效......

更新了淡出标签

$(document).ready(function() {

    $('.thumbs ul li').css('opacity', '.5');
    $('.thumbs ul li:first-child').addClass('current');

    $('.projectview').children().hide();
    $('.projectview').children(".planinfo").show();

    $('.thumbs ul li').click(function(){

        // Show info
        var thumb = $(this).attr('class');
        var partner = $('.' + thumb + 'info');
        $('.projectview').children().fadeOut();
        partner.fadeIn();

        // Tab opacity
        $(".current").removeClass("current");
        $(this).addClass("current");

    });

});

<强> CSS

.thumbs ul li {
    float: left;
    text-decoration: none;
    width: 70px;
    height: 75px;
    margin: 0 5%;
    cursor: pointer;
    opacity:.5;
}
    .thumbs ul li.current {
        opacity:1 !important;
    }

Answer 2

//hide all the choices
$('.projectview').children().hide();

$('.thumbs ul li').on('click', function(){
    $('.projectview').children().hide();
    $('.projectview').find('[class^='+this.className+']').show();
});

Visualizing it

Answer 3

另一种解决方案：

<section class="thumbs">
  <ul>
    <li class="plan" data-alias="plan">
      <img src="images/new/plan.jpg" alt="plan" class="serviceicon">
    </li>
    <li class="design" data-alias="design">
      <img src="images/new/design.jpg" alt="design" class="serviceicon">
    </li>
    <li class="build" data-alias="build">
      <img src="images/new/build.jpg" alt="build" class="serviceicon">
    </li>
    <li class="launch" data-alias="launch">
      <img src="images/new/launch.jpg" alt="launch" class="serviceicon">
    </li>
    <li class="grow" data-alias="grow">
      <img src="images/new/grow.jpg" alt="grow" class="serviceicon">
    </li>
  </ul>
</section>

<section class="projectview">
  <section class="planinfo" data-ref="plan"><img src="images/new/planinfo.jpg" alt="blog" class="planinfo"></section>
  <section class="designinfo" data-ref="design"><img src="images/new/designinfo.jpg" alt="blog" class="designinfo"></section>
  <section class="buildinfo" data-ref="build"><img src="images/new/buildinfo.jpg" alt="blog" class="buildinfo"></section>
  <section class="launchinfo" data-ref="launch"><img src="images/new/launchinfo.jpg" alt="blog" class="launchinfo"></section>
  <section class="growinfo" data-ref="grow"><img src="images/new/growinfo.jpg" alt="blog" class="growinfo"></section>
</section>


<script>
var $infos = $('> section', '.projectview');
$infos.hide();

$('li', '.thumbs').on('click', function() {
   var selector = '[data-ref="'+$(this).data('alias')+'"]';
   $infos.not(selector).fadeOut();
   $infos.filter(selector).fadeIn();
});
</script>

编写这个jQuery脚本是他们更有效的方法吗？

3 个答案: