Question

所以这就是我想要做的 - 我希望每次用户在'select'选择不同的选项时，都会激活不同的功能。每个'selected：option'都有不同的功能。使用以下代码可能更容易理解：

$('.edd-variable-pricing-switcher').change(function() {
        if($(this).val() == 1) {
            $('.chackout-licence-private').css('display', 'block');
        }
        else {
            $('.chackout-licence-private').css('display', 'none');
        }

    if(e.originalEvent) {
        window.location.reload(true);
    }
}).change();

现在它有效，当我在我的select（select class =“。edd-variable-pricing-switcher”）中选择值为'1'的选项时，我的div为“.chackout-licence-”私人“显示块。我的问题是 - 页面永远不会停止重新加载自己。当我在最后触发更改事件时，它会导致无限的页面重新加载，但是在没有触发更改事件的情况下，在页面重新加载后，更改将不再存在。

我试图寻找的解决方案是，如何在页面重新加载一次后触发更改事件，这样页面就不会在循环中继续重新加载。

由于

修改

我正在添加一些代码.. 1.这是我正在尝试影响和显示的html（通常是display：none）：

<div class="chackout-licence">
    <div class="chackout-licence-private">
        <h3>Private Licence</h3>
            <p>
            A single track licence for online entertainment video....
            </p>
  </div><!--chackout-licence-private-->

select和选项代码部分来自插件，所以我要从inspect元素添加一个图像：
解释：我正在尝试为产品创建可变定价，因此在结账时，用户可以决定他将购买产品的许可证。所以他从选择中选择一个选项，并且每个选项显示关于每个许可证的不同描述。

Answer 1

如何在页面重新加载一次后触发更改事件，所以页面不会继续在循环中重新加载

[编辑]我认为这个会奏效：

jQuery( function( $ ) {
    /**
     * Hides (default) or shows an element.
     *
     * @param s    mixed A DOM selector. E.g. .my-class or #my-unique-id
     * @param show bool  If TRUE, shows the element. Otherwise, hides it.
     * @return object The target element.
     */
    function toggleDisplay( s, show ) {
        if ( show ) {
            return $( s ).show();
        } else {
            return $( s ).hide();
        }
    }

    /*
     * You may also instead target the SELECT's "name" value. I.e.
     * $( 'select[name="edd-variable-pricing-switcher[60]"]' )
     */
    $( 'select.edd-variable-pricing-switcher' ).each( function() {
        // Saves the default value. (on-page cache)
        $( this ).data( '_defaultValue', this.value );

        // When the value changes, reloads the page.
        $( this ).on( 'change', function() {
            var _defaultValue = $( this ).data( '_defaultValue' );

            // Invalid value.
            if ( ! this.value ) {
                // Hides .chackout-licence-private
                toggleDisplay( '.chackout-licence-private' );
            }
            // It's the default value. ("no" changes)
            else if ( this.value === _defaultValue ) {
                /*
                 * Shows .chackout-licence-private, if value is 1; otherwise,
                 * hides it.
                 */
                toggleDisplay( '.chackout-licence-private', '1' === this.value );
            }
            // It's a valid new value.
            else {
                // The TRUE below - are you 100% sure you want to force reload?
                window.location.reload( true );
            }
        } );

        /*
         * When the page loads (i.e. first load or after a reload), shows/hides
         * the appropriate DIV. In this case, we show .chackout-licence-private
         * if value is 1; otherwise, hides it.
         */
        toggleDisplay( '.chackout-licence-private', '1' === this.value );
    } );
} );

Answer 2

您正在跟踪更改事件，在该功能中执行某些操作，但在您再次触发更改事件后立即执行。

$('.edd-variable-pricing-switcher').change(function() { ... }).change();是您的代码。最后一个.change()会触发另一个更改，因此会重复。

只需删除最后一个.change()

$('.edd-variable-pricing-switcher').change(function() {...});

jQuery - 如何在重新加载后触发事件 - 仅限ONCE

2 个答案: