Fatal编程技术网
  • javascript/
  • Javascript jQuery-使用相同的HTML两次会使我的脚本不起作用

Javascript jQuery-使用相同的HTML两次会使我的脚本不起作用

javascript jquery html

Javascript jQuery-使用相同的HTML两次会使我的脚本不起作用,javascript,jquery,html,jquery-effects,Javascript,Jquery,Html,Jquery Effects,我对jQuery很陌生，我已经想出了影响下面HTML的脚本。剧本做得很好，我已经知道我是否愿意了。我遇到的问题 当我复制HTML和脚本时，单击后，只显示文档中最后的项目信息和项目图像。我也尝试过很多不同的方法 <div class="apple"> <img src="http://mybroadband.co.za/photos/data/500/apple-logo.jpg"/> </div> <div

我对jQuery很陌生，我已经想出了影响下面HTML的脚本。剧本做得很好，我已经知道我是否愿意了。我遇到的问题
当我复制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 -- >

$（this）.children（）

    <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 -- >
但我似乎无法让任何人工作。任何帮助都将不胜感激

    <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 -- >
多谢各位

    <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 -- >
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');
    });
  });

    <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 -- >
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 -- >


你好，世界
联合国可持续发展基金会（Suefhu Suefhuk Suefhuk Suefhuk Suefhuk Suefhuk Suefhuk Suefhuk Suefhuk Suefhuk Suefhuk Suefhuk Suefhu Suefhu Suefhu Suefhuk Suefhuk Suefhuk Suefhuk Suefhuk Suefhuk Suefhuk Suefhuk Suefhuk Suefhu Suefhu Suefhu Suefhu Suefhu Suefhu Suefhu Suefhu


    <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 -- >



你快到了。在上面的示例中，Children不起作用，因为类为“apple”的div没有任何Children。您需要将第一个结束标记移动到公文包项目的底部，以便每个公文包项目的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 -- >



<!--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 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 -- >



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



如果已正确更新html，
$（此）
将指向一个div元素，该元素确实具有类为“project info”和“project images”的子元素。这里有一个更新的JSFIDLE，它应该可以满足您的需要：
可能您正在使用“ID选择器中变暗”，当您复制html时它会被复制…“当我复制html和脚本时”-执行此操作的代码在哪里。。？
#变暗
在哪里？它也被复制了吗？你能提供一个简单的演示吗？我不确定这里要问什么。我已经将您的代码加载到这个jsfiddle:中，它显示了苹果的徽标。你所说的“复制HTML和脚本”是什么意思？@Chrishodges copy粘贴了HTML/script，对此表示抱歉。我计划做的是创建一个只有图像的公文包。单击图像后，div将显示详细信息。我已更新您的JSFIDLE Chris以显示我的错误结果。当你点击苹果或者船的时候，所有的细节都会显示出来。我只想显示属于个人图像的细节。这就是为什么我想使用美元（这个）辉煌！我以为是这样的，现在我明白为什么了。我认为我的结束脚本现在有问题。如果我打开苹果，关上，然后打开船。两个细节同时展开。关闭脚本是否需要包含$（this），或者如果我将其放置在项目信息和项目图像上方，则可以再次使用子项？在关闭函数回调的末尾，需要添加行“return false；”。如果你不这样做，那么点击事件将出现在“apple”分区中。我已经更新了JS Fiddle:这里有一些关于事件冒泡的更多信息：如果你对我的回答满意，如果你能投赞成票（左边的向上箭头），那就太好了。谢谢

    <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 -- >