Question

我对jQuery很新，我提出了影响下面HTML的脚本。该脚本运行完美，我已经知道我是否愿意。我遇到的问题当我复制HTML和脚本时，一旦点击，只显示文档中的最后一个项目信息和项目图像。

我尝试了很多不同的方法

$(this).children()

但我似乎无法开始工作。任何帮助将不胜感激。

谢谢

的jQuery

 $(document).ready(function() {
   $('.apple').click(function() {
     $('#darken').addClass('dark');
     $('.project-info').delay('1000').slideDown('slow');  
     $('.project-images').delay('1000').fadeIn('slow');
   });
 });

  $(document).ready(function() {
    $('.close').click(function() {
        $(".project-info, .project-images").fadeOut('slow');
    });
  });

HTML

    <div class="apple">
      <img src="http://mybroadband.co.za/photos/data/500/apple-logo.jpg"/>
    </div>

        <div class="project-info" style="display:none;">
          <div class="project-title">
            <h1>hello world</h1>
          </div>

          <div class="details">
            <p>dkusdufhu suskueh sukh suefhuksdfnkuesnfukneukf nseuknfukenfuk nukefnuksn fukfuksukfnuksenf unseukfunfukfunufen u u u ef euhfuehfeufu g gfd gerjkg rjgrjg j js grg rgsg dkusdufhu suskueh sukh</p>

          <div class="links">
            <a href="#">link</a>
          </div>

          <div class="close"></div>
        </div><!-- end of project info -->



      </div>
      <div class="project-images" style="display:none;">
      <div class="-images">
        <img src="http://cdn4.spiegel.de/images/image-499233-galleryV9-grcy.jpg" />
        <img src="http://cdn4.spiegel.de/images/image-499233-galleryV9-grcy.jpg" />
      </div>

      <div class="close end"></div>
    </div> <!-- Project Images -->

  </div> <!-- # Darken -- >

Answer 1

你快到了。孩子们不会在上面的例子中工作，因为上课与班级“苹果”有关。没有孩子。您需要将第一个结束标记移动到投资组合项目的底部，以便每个投资组合项目的html结构如下：

<!--PORTFOLIO ITEM-->
<div class="apple">
    <!-- ICON GOES HERE-->
    <img src="http://mybroadband.co.za/photos/data/500/apple-logo.jpg"/>

    <!-- PROJECT INFO GOES HERE-->
    <div class="project-info" style="display:none;">

    </div>
    <!-- PROJECT IMAGES GOES HERE-->
    <div class="project-images" style="display:none;">
    </div>
</div>

即。带课程的div＆＃39; project-info＆＃39;和＆＃39;项目图像＆＃39;在苹果里面＃39; DIV。然后改变这个：

$('.project-info').delay('1000').slideDown('slow');  
$('.project-images').delay('1000').fadeIn('slow');

到此：

$(this).children('.project-info').delay('1000').slideDown('slow');  
$(this).children('.project-images',this).delay('1000').fadeIn('slow');

如果您已正确更新了自己的html，$(this)将指向一个div元素，该元素确实包含带有类的子元素＆＃39; project-info＆＃39;和＆＃39;项目图像＆＃39;。这是一个更新的JSFiddle，可以为您提供所需的内容：http://jsfiddle.net/8k3Ms/1/

jQuery - 两次使用相同的HTML会导致我的脚本无法运行

1 个答案: