單擊href鏈接時如何將查詢字符串參數添加到相同的URL

Question

 //script to show magnific popup <script> $('.gallery-lb').each(function() { // the containers for all your galleries $(this).magnificPopup({ delegate: 'a', // the selector for gallery item type: 'image', gallery: { enabled:true }, mainClass: 'mfp-fade' }); }); </script> //script to show popup (function ($) { [ Show modal1 ]*/ $('.js-show-modal1').on('click',function(e){ e.preventDefault(); $('.js-modal1').addClass('show-modal1'); }); $('.js-hide-modal1').on('click',function(){ $('.js-modal1').removeClass('show-modal1'); }); })(jQuery); 

 <?php //Quick View link at index.php page if(count($product) > 0) { foreach ($product as $products){ echo' <a href="?qid='.$products['Product_ID'].'" class="block2-btn flex-cm stext-103 cl2 size-102 bg0 bor2 hov-btn1 p-lr-15 trans-04 js-show-modal1">Quick View </a> ';}?> <!-- Display product details on magnific modal popup --> <div class="wrap-modal1 js-modal1 pt-60 pb-20"> <div class="overlay-modal1 js-hide-modal1"></div> <div class="container"> <div class="row"> <div class="slick3 gallery-lb"> <?php //check if query string exist in URL if(isset($_GET['qid']) && !empty($_GET['qid'])){ //get selected product details from database and display at magnific modal popup $selectedproduct =$app->getProductDetails($_GET['qid']); if(count($selectedproduct) > 0){ foreach ($selectedproduct as $productdetail){ echo ' <div class="item-slick3" data-thumb="'.$productdetail['Product_Image'].'"> <div class="wrap-pic-w pos-relative"> <img src="'.$productdetail['Product_Image'].'" alt="IMG-PRODUCT"> <a class="flex-cm size-108 how-pos1 bor0 fs-16 cl10 bg0 hov-btn3 trans-04" href="'.$productdetail['Product_Image'].'"> <i class="fa fa-expand"></i></a> </div> </div> <div class="item-slick3" data-thumb="'.$productdetail['Product_Detail_Image01'].'"> <div class="wrap-pic-w pos-relative"> <img src="'.$productdetail['Product_Detail_Image01'].'" alt="IMG-PRODUCT"> <a class="flex-cm size-108 how-pos1 bor0 fs-16 cl10 bg0 hov-btn3 trans-04" href="'.$productdetail['Product_Detail_Image01'].'"><i class="fa fa-expand"></i></a> </div> </div> <div class="item-slick3" data-thumb="'.$productdetail['Product_Detail_Image02'].'"> <div class="wrap-pic-w pos-relative"> <img src="'.$productdetail['Product_Detail_Image02'].'" alt="IMG-PRODUCT"> <a class="flex-cm size-108 how-pos1 bor0 fs-16 cl10 bg0 hov-btn3 trans-04" href="'.$productdetail['Product_Detail_Image02'].'"> <i class="fa fa-expand"></i></a> </div> </div>'; } } }?> </div> </div> </div> </div> 

我想創建一個電子商務網站，當用戶單擊特定產品的“快速查看”鏈接時，該網站在燈箱彈出窗口中顯示產品詳細信息。 但是，我無法這樣做，因為執行onclick操作時，附加在產品“快速查看”鏈接上的查詢字符串不會顯示在索引URL上。 因此，點擊產品鏈接后，燈箱將顯示空白結果。

產品快速查看URL看起來像這樣： http：//localhost/index.php？qid =（某些產品ID）。

我正在使用巨大的彈出源代碼來顯示燈箱。

預期結果：單擊產品快速查看鏈接后，將彈出一個燈箱，以在索引URL頁面中顯示所選產品的產品詳細信息。

當我單擊href鏈接時，如何將查詢字符串添加到索引URL，以便可以基於查詢字符串qid（即產品ID）從數據庫中獲取適當的產品詳細信息，並顯示在燈箱中。 希望有人幫助我。 :)

Answer 1

像這樣

 <a onclick="window.location='http://localhost/index.php'+window.location.search;">Quick View</a> 

也許？

Answer 2

如果您只想在url中添加一些內容，則不需要太多代碼。 您可以只在javascript上使用.pushState函數。

history.pushState({}, "page title", "?qid=some_product_id or anything");

在此處查找詳細信息： https : //developer.mozilla.org/zh-CN/docs/Web/API/History_API#Adding_and_modifying_history_entries

這也將保留歷史。

Answer 3

您可以使用以下代碼並向查詢字符串添加參數

window.history.replaceState（null，null，“？param1 = value”）;