Targeting single page with JS

时间:2020-07-23 作者:Daniel Nebert

我创建了一个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\' ) )
    );
}

?>

1 个回复
最合适的回答,由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需要唯一