我创建了一个JS和PHP代码来查询数据库并在页面上显示匹配的行。它搞乱了WP上的其他页面,所以我想知道如何定位单个页面,这样JS就不会在其他页面上运行。
JS公司:
jQuery(document).ready( function() {
console.log("Document loaded");
jQuery("#searchButton").click( function(e) {
console.log("Search button clicked");
e.preventDefault();
var zipCode = document.getElementById("inputField").value;
var data = {
\'action\' : "zip_code",
\'zip_code\' : zipCode
};
console.log("Zip code entered: " + data.zip_code);
console.log("WP AJax URL: " + data.action);
jQuery.ajax({
type : "post",
dataType : "json",
url : data.action,
data : data,
success: function(response) {
console.log(response.data);
if(response.success) {
console.log("response.type == success");
jQuery("#results").html(response.data.data);
}
else {
console.log("response.type == else");
console.log(response.data);
}
},
error: function(errorThrown){
console.log("In error, error thrown!");
console.log(errorThrown);
}
})
})
});
PHP:
<?php
add_action( \'wp_enqueue_scripts\', \'enqueue_parent_styles\' );
function enqueue_parent_styles() {
wp_enqueue_style( \'parent-style\', get_template_directory_uri().\'/style.css\' );
}
add_action(\'wp_ajax_zip_search\', \'zip_search\');
add_action(\'wp_ajax_nopriv_zip_search\', \'zip_search\' );
function zip_search()
{
global $wpdb;
// Functional code omitted for now. Just need to get "here" paragraph return (for now)
$output = "<p>here</p>";
$response = array(
\'data\' => $output,
);
wp_send_json_success($response);
}
add_action( \'wp_enqueue_scripts\', \'my_load_scripts\' );
function my_load_scripts() {
// Enqueue javascript on the frontend.
wp_enqueue_script(
\'zip_js\',
get_template_directory_uri() . \'-child-agent_search/js/zip_search.js\',
array(\'jquery\')
);
// The wp_localize_script allows us to output the ajax_url path for our script to use.
wp_localize_script(
\'zip_js\',
\'myAjax\',
array( \'ajaxurl\' => admin_url( \'admin-ajax.php\' ) )
);
}
?>
最合适的回答,由SO网友:Tom J Nowell 整理而成
在这里,代码对与#searchButton
要素:
jQuery("#searchButton")
如果有
searchButton
在其他页面上,它将匹配它,所以你需要更具体。
例如,在主页上<body>
标签将具有home
类,这是我的网站主页正文标记:
<body class="home blog logged-in admin-bar no-customize-support">
因此,要使其仅针对主页上的搜索按钮,您可以尝试以下操作:
jQuery(".home #searchButton")
或者,只在该特定页面上将JS排队,但选择器方法更优越。确保页面上只有一个ID为的元素,因为ID需要唯一