将“OnChange”添加到 woocommerce 选择元素的正确方法？答案

【问题标题】：Right way to add "OnChange" to woocommerce select element?将“OnChange”添加到 woocommerce 选择元素的正确方法？
【发布时间】：2020-08-14 02:08:26
【问题描述】：

我需要将onchange="myFunction()" 添加到下面的选择中。但是下面的选择来自 woocommerce，我希望它在我更新主题时保留 onchange="myFunction()"。

实现这一目标的最佳方法是什么？（我应该进入 woocommerce 并直接使用 select 编辑文件吗？）

<select id="pa_color" class="" name="attribute_pa_color" data-attribute_name="attribute_pa_color" data-show_option_none="yes">

<option value="">Color</option>
<option value="black" class="attached enabled">Black</option>
<option value="brown" class="attached enabled">Brown</option>

</select>

或者我可以使用 javacript 将 onchange="myFunction()" 添加到 <select id="pa_color"> 以便在我更新主题时保留它吗？

【问题讨论】：

创建一个简单的插件，它将加载一个 javascript 文件，该文件将包含您的 onChange 侦听器。
如何制作 onchange 监听器你能帮帮我吗？

标签： javascript html wordpress woocommerce wordpress-theming

【解决方案1】：

如果您想添加一些自定义 js 功能并在更新或更改主题后保留它，您可以创建一个插件，假设您将其命名为 my-awesome-plugin.php 并将此文件转储到 /wp-content/plugins /my-awesome-plugin 文件夹。

插件文件可以包含以下内容：

<?php
/*
Plugin Name: My Awesome Plugin
Plugin URI: http://example.com
Description: A plugin that loads an awesome js file.
Author: John Doe
Author URI: http://example.com
version: 1.00
*/

add_action('wp_enqueue_scripts','my_awesome_plugin_load_js');

function my_awesome_plugin_load_js() {
    wp_enqueue_script( 'my-awesome-js', plugins_url( '/js/my-awesome-js.js', __FILE__ ), array('jquery'));
}

然后在您的插件文件夹中创建一个 /js/ 文件夹并添加一个文件 my-awesome-js.js

当您激活插件时，它应该会加载 my-awesome-js.js 文件。

在这个文件中，你可以添加你的监听器。

jQuery(function ($) {
  'use strict';


    $('#pa_color').change(function() {
       // here is your value and you can do whatever you want to do with it.
       var value = $(this).val();

    });

});

【讨论】：