Как добавить параметр строки запроса к тому же URL-адресу при нажатии ссылки href

//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-c-m 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 p-t-60 p-b-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-c-m 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-c-m 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-c-m 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>

Я хотел создать сайт электронной торговли, который отображает сведения о продукте во всплывающем окне, когда пользователь нажимает ссылку «Быстрый просмотр» определенного продукта. Однако я не могу этого сделать, поскольку строка запроса, добавленная к ссылке «Быстрый просмотр» продукта, не отображается в URL-адресе индекса при выполнении действия onclick. Следовательно, после нажатия на ссылку продукта в лайтбоксе отображается пустой результат.

URL-адрес быстрого просмотра продукта выглядит примерно так: http: //localhost/index.php? qid = (некоторые идентификатор продукта).

Я использую великолепный исходный код всплывающего окна для отображения лайтбокса.

Ожидаемый результат: при нажатии на ссылку быстрого просмотра продукта появится всплывающее окно со сведениями о выбранном продукте на странице URL-адреса индекса.

Как я могу добавить строку запроса к URL-адресу индекса при щелчке ссылки href, чтобы соответствующие сведения о продукте можно было получить из базы данных на основе строки запроса qid (также известного как идентификатор продукта) и отобразить в лайтбоксе. Был бы признателен, если бы кто-нибудь помог мне с этим. :)

Спасибо всем за быстрый ответ. Однако я ищу не это. Я хотел бы отображать строку запроса на той же странице после того, как пользователь щелкнет гиперссылку быстрого просмотра продукта со страницы index.php.

Ferlina 08.01.2019 18:03

Например, мой URL-адрес страницы по умолчанию - локальный / index.php, после того, как пользователь щелкнет ссылку быстрого просмотра продукта, URL-адрес должен быть локальный / index.php? qid = 1, где qid - это динамический идентификатор, полученный из базы данных, и уникальный идентификатор для каждого продукта.

Ferlina 08.01.2019 18:12

Это href-код на index.php: <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 "> Быстрый просмотр </a>

Ferlina 08.01.2019 18:13

При нажатии на ссылку href он указывает на эту js-функцию, которая отображает модальное всплывающее окно для получения сведений о продукте: (function ($) {[Show modal1] * / $ ('. Js-show-modal1'). On ('click' , функция (e) {e.preventDefault (); $ ('. js-modal1'). addClass ('show-modal1');});

Ferlina 08.01.2019 18:16

В настоящее время я не могу показать подробную информацию о продукте, поскольку URL-адрес не показывает строку запроса идентификатора продукта. Поскольку я новичок в javascript, я был бы признателен, чтобы кто-нибудь помог мне с некоторым примером. Большое спасибо.

Ferlina 08.01.2019 18:21
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
5
142
3

Ответы 3

Что-то вроде этого

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

может быть?

это обновит страницу. это перенаправление

Vinay Sheoran 07.01.2019 18:05

@VinaySheoran Верно, я неправильно понял вопрос. Хотя кое-что узнал из вашего ответа, так что спасибо!

Daniel Black 07.01.2019 18:07

Для этого нам не нужно столько кода, если вы просто хотите добавить что-то в URL-адрес. вы можете просто использовать функцию .pushState на javascript.

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

Подробности здесь: https://developer.mozilla.org/en-US/docs/Web/API/History_API#Adding_and_modifying_history_entries

это также будет присутствовать в истории.

Вы можете использовать следующий код и добавить параметры в строку запроса

window.history.replaceState (ноль, ноль, «? param1 = значение»);

Другие вопросы по теме