Question

我正在使用wordpress创建搜索引擎，并且希望创建一个可以在点击时删除的关键字。

更具体地说，我有：

MyUrl http://myexemple.com/?sfid=2675&_sft_category=virtualisation-cloud-devops+ms+in

我可以抓取查询并将其显示在我的页面上：

                <?php
                $motsclefs = $_GET['_sft_category'] ;
                $motsclefsconvert = explode(" ", $motsclefs);
                $classId = 0;
                function get_replace(){

                }
                // If the parameter is given, continue.
                if (isset($_GET['_sft_category'])) {
                    echo ' Mots clefs sélectionnés :&nbsp;';
                } 
                else {    
                    echo 'Pas de mots clefs sélectionnés';
                };

                foreach ($motsclefsconvert as $valuemotsclefsconvert) {
                    //Up the class id by 1
                    $classId++;
                    // Echo the divs
                    echo '<div onclick="this.remove();"  id="mywords" class="' . $classId . '">' . $valuemotsclefsconvert . '&nbsp;&nbsp;&nbsp;</div>';
                }
                ?>

此代码适用于我的搜索引擎。它从我的网址中获取查询，并将其显示在我的页面上。

目前，他们只是单击结果，由于我的div中的this.remove();，它不进行任何重新加载就消失了。如何删除他们单击的查询并重新加载页面以刷新结果？

Answer 1

如果我理解正确，那么您只想在点击其中一个关键字后添加重新加载即可。

如果要在PHP中仅进行操作，您并不确定，所以我为您提供了一个纯JavaScript的解决方案。

/** {string} URL queries in string */
let urlQueriesString = window.location.search,
/** {string[]} URL queries in array */
	urlQueriesArray = urlQueriesString.substring(1).split('&'),
/** {Object.<string, string>} URL queries in object */
	urlQueries = {},
/** {string[]} List of search keywords */
	searchKeywords = [],
/** {HTMLElement[]} List of <li> which will be inserted into DOM */
    liElements;

// Fills in urlQueries object
for (let i in urlQueriesArray) {
	urlQueriesArray[i] = urlQueriesArray[i].split('=');
    
    urlQueries[urlQueriesArray[i][0]] = urlQueriesArray[i][1];
}

// Gets search keywords from _sft_category parameter
searchKeywords = urlQueries._sft_category.split('+'); // or .split(' ')

// Inserts a <li> in the DOM for each keyword
for (let i in searchKeywords) {
	let ul = document.getElementsByTagName('ul')[0],
        html = `<li>${searchKeywords[i]}</li>`;
    
    ul.innerHTML += html;
}

// Gets inserted <li>
liElements = document.getElementsByTagName('li');

// Adds an event on click for each <li>
for (let i in liElements) {
    let li = liElements[i];
    
    // Checks instance type because last element of liElements is the length and we don't want to do what's following for this one
    if (li instanceof HTMLElement) {
    	// Creates new URL on click
        li.addEventListener('click', function() {
            let url = window.location.hostname + window.location.pathname,
                keyword = this.innerText;
                
            searchKeywords = searchKeywords.filter((kw) => (kw !== keyword));
            
            url += urlQueriesString.replace(/_sft_category=[\w\d_+-]+/, `_sft_category=${searchKeywords.join('+')}`);
            
            console.log(url);
            
            // Uncomment next line for reload with new url
            // window.location.href = url;
        });
    }
}

<ul></ul>

此代码段可以简化，但目前应该可以完成。

您可能需要对其进行一些调整才能使其与您的项目一起使用。

从网址中删除查询

1 个答案: