Question

我有一张带ID的图片。如果有人点击该图像，.HTML必须在同一页面上滑动或淡入。 .HTML页面还有一个关闭按钮，因此他们可以关闭HTML页面

但是如何用jQuery或Javascript显示.HTML页面？

我想要这样的事情： http://elitemodel.fr/fr/mainboard/women

如果您点击照片，（.html页面会向上滑动并显示相关信息）我已经完成了所有工作，除了显示.HTML页面的代码

我试过这个但没有结果：

$(document).ready(function(){
    $('#ams2t').click(function(){   
        $('#body').load('pictures/amsterdam1.html');
     });
});

ams2t是图片的ID：<img id="ams1t" class="thumb" src="images/amsterdam/thumb/ams1.jpg" alt="" />

所以如果有人点击那张照片.. picuture / amsterdam1.html必须向上滑动或淡入

这样的事情：

$("#ams1t").click(function () {
   $('#ams1').slideDown( "slow", function() {
     });
});

Answer 1

您没有指定是静态加载还是动态加载#ams1t，因此我已将点击处理程序附加到文档以确保安全。

在<div id='#amsterdam1_container' style='display:none;position:absolute;top:0;left:0;right:0;bottom:0;z-index:999'>\\content</div>内的内容周围添加amsterdam1.html。一旦文件加载，这将用于fadeIn()。

$(document).off("click","#ams1t").on("click","#ams1t", function(){
   $.get( "pictures/amsterdam1.html", function( data ) {
     $( "body" ).append( data );
     //fade in 
     $('#amsterdam1_container').fadeIn();
  });
});

Answer 2

首先，slideUp实际上隐藏了来自页面的html数据，而slideDown显示了该数据。所以你必须使用slideDown而不是slideUp。

您需要通过jquery ajax或post方法将ID传递给另一个页面。该页面将从数据库中获取与该ID相关的相关数据，并将数据返回到第一页。然后，第一页将显示此数据到任何预定义的div。

所以我们先把div添加到第一页。

<div id="result"></div>

图片id是唯一的。您的页面可能包含数百张图片。如果您根据id添加点击事件，则必须为每个ID添加代码。因此，在id上添加点击事件，将其添加到class上。因此，将此代码添加或修改到您的第一页：

$(document).ready(function(){
  $("#result").hide();
    $('.thumb').click(function(){
         var imageId = $(this).closest('div').attr('id');   
         $.post("anotherpage.php", {id: imageId}, function(data){
           $("#result").html(data).slideDown("slow");
         });
     });
});

并在anotherpage.php中：

if(isset($_POST['id']){
 $query = "SELECT details FROM table WHERE id='$_POST['id']";
 // Execute this query and fetch the result
 .....................
 .....................
 while($row=mysql_fetch_assoc()){
  echo $row['details'];
}

我提到了用更简单的代码处理anotherpage.php的代码。如果要阻止sql注入，则必须在处理之前验证ID。您可能拥有自己的mysql或mysqli处理代码。我刚刚在这里演示了这个过程。

如果您不想使用php并希望所有细节都将加载图片，那么您必须在单独的div中加载这些图片的所有细节。与图像标识p01一样，您必须在页面加载中加载div中的详细信息。

<img id="p01" class="thumb" src="images/amsterdam/thumb/ams1.jpg" alt="" />
<div id="d_p01" class="picDetails">Picture details of p01</div>

然后添加此jquery代码而不是第一个：

   $(document).ready(function(){
      $("#result").hide();
      $(".picDetails").hide();
        $('.thumb').click(function(){
             var imageId = $(this).closest('div').attr('id');
             var divId = 'd_'+imageId;   
               $("#"+divId).slideDown("slow");             
         });
    });

或者如果你想从另一个html页面加载相关的pic细节，那么它也是可能的。为此，我的建议是将所有图片详细信息包含在anotherpage.html中的单独段落中，其中包含以下ID：

<p id="d_p01">This is details of first picture</p>
<p id="d_p02">This is details of second picture</p>

然后添加此代码：

  $(document).ready(function(){
      $("#result").hide();
        $('.thumb').click(function(){
             var imageId = $(this).closest('div').attr('id');
             var pId = '#d_'+imageId;   
               $("#result").load("anotherpage.html pId").slideDown("slow");             
         });
    });

如何使用jQuery在我的页面上滑动.HTML？

2 个答案: