如何將值傳遞給其他html頁面並使用jquery將onclick縮略圖重定向到該頁面？

在這裏，我需要點擊一個縮略圖，以便它會顯示其他頁面上的細節，它應該只顯示該特定的拇指的細節。我在這裏使用xml文件來獲取數據並顯示縮略圖。我無法將這些值傳遞給其他頁面，並在onclick事件的同時打開它。請幫助如何將值傳遞給其他html頁面並使用jquery將onclick縮略圖重定向到該頁面？

<div class="container-page"> 

      <div class="row" id="portfolio"> 
       <div class="col-md-2"> 
        <nav> 
         <ul class="nav nav-pills nav-stacked" id="test"> 
          <li role="presentation" class="active"><a href="#portfolio" id="services">Services</a></li> 
          <li role="presentation"><a href="#portfolio" id="desktop">Desktop</a></li> 
          <li role="presentation"><a href="#portfolio" id="web">Web</a></li> 
          <li role="presentation"><a href="#portfolio" id="mobile">Mobile</a></li> 
          <li role="presentation"><a href="#portfolio" id="design">Design</a></li> 
         </ul> 
        </nav> 
       </div> 
       <div class="col-md-10"> 
        <div class="row" id="thumb"> 

        </div> 
       </div> 
      </div> 
     </div> 
<!-- js --> 
$.ajax({ 
      type:"GET", 
      url:"portfolio.xml", 
      dataType:"xml", 
      success:function(xml) 
      { 

       $(xml).find('thumbnail').each(function() 
       { 
        var $thumbnail=$(this); 

              var type=$thumbnail.find('type').text(); 
              var descr=$thumbnail.find('description').text(); 
              var title=$thumbnail.attr('title'); 
        var imageurl=$thumbnail.attr('imageurl'); 
        var thum='<div class="col-xs-6 col-md-3"> </div>'; 
              thum=$(thum).appendTo("#thumb"); 
        thum = $('<a href="#" class="thumbnail forHove"></a>').appendTo(thum); 
        var thumName = $('<div class="thumTitle"></div>').appendTo(thum); 
        $('<h2>'+title+'</h2>').appendTo(thumName); 
        $('<p>'+type+'</p>').appendTo(thumName) 
        thum = $('<img src="'+imageurl+'" alt="image" class="thumbImgSize imgSlide">').appendTo(thum); 
        $(".forHove").mouseup(function() 
        { 
    //here is the redirection code, and want to pass $thumbnail to testxml.html page 
window.location="http://www.bookmane.in/skillworks/testxml.html"; 
       $(thum).appendTo(".s"); 
     }); 
       }); 
      } 

     });

來源

2015-12-18 Mr.arrogant

好了，替代的人正在使用Web Storage API。只需存儲img html並使用它。

// use 'click' instead of 'mouseup' 
 
$(".forHove").click(function() 
 
{ 
 
    // store image html to sessionStorage 
 
    window.sessionStorage.image_data = $thumbnail.clone().wrapAll("<div>").parent().html(); 
 
    
 
    window.location="http://www.bookmane.in/skillworks/testxml.html"; 
 
    $(thum).appendTo(".s"); 
 
}); 
 

 

 
// in http://www.bookmane.in/skillworks/testxml.html 
 
// You have data sotred and insert it somewhere 
 
$(document.body).append(window.sessionStorage.image_data);

來源

2015-12-18 09:51:28

您可以通過以下步驟實現這一點：

添加一個表單標籤像

<form action="YOUR_PATH" method="GET"> 
    <a class="thubnailClick" href="#" > 
     <html_of_your_thumbnail> 
     <input type="text" name="NAME_OF_PARAMETER" /> 
    </a> 
</form>

現在覆蓋的<a> click事件標籤

$(document).ready(function() { 
    $(".thubnailClick").on('click', function(event) { 
     // to override the default behavior of <a> tag. 
     preventDefault();   
     // Find the form element using closest() of jQuery. 
     // Call submit event of that form using $(form_element).submit(); 
    }); 
})

現在其他頁面上，你可以從URL中使用location.search得到的參數或遵循：
Getting Query params using JavaScript
現在根據自己的需要使用這些PARAMS。

來源

2015-12-18 09:52:15

如何將值傳遞給其他html頁面並使用jquery將onclick縮略圖重定向到該頁面？

回答

相關問題