每次调用函数后检查条件

Question

我写了一个函数 show() - 它显示隐藏的 id 类（我知道有 jquery 和其他方法可以做到这一点，但我想要这样）。

//-------------------------
// Function show()
//-------------------------
/**
 * Changes element class name from hide to show in parent element [ default: content ] and hides every other shown classes in that parent element.
 * @param { string } id || none to show  
 * @param { string } parent element id, if provided changes default [ optional ]
 * @params { string } more elements id's to be shown [ optional ]
 * @return { void } changed classes names
**/

我有 html select:

<select name="productName" id="productName">
    <option value="none" selected>Choose product</option>
    <option value="product01">product01</option>
    <option value="product02">product02</option>
    <option value="product03">product03</option>
</select>

我有事件侦听器，通常显示 div 的隐藏集：

document.getElementById( 'productName' ).addEventListener( 'change', function() {
    if( document.getElementById( 'productName' ).value != 'none' ) {
        if( document.getElementById( 'productName' ).value != 'none' && document.querySelectorAll( '.show' )[ 1 ].id ) show( document.querySelectorAll( '.show' )[ 1 ].id, 'content', 'showProductData' );
    }
} );

当用户更改 select 的值时，我的条件完美运行，它显示了它应该显示的内容。但是用户可以单击 link 再次触发 show() 函数并更改他的视图，然后出现我的问题。

很明显，select 标记的 onchange 事件不会在用户单击锚点并更改页面内容时触发。

所以我需要检查是否调用了 show() 函数，如果调用了，则再次检查以下条件：

    if( document.getElementById( 'productName' ).value != 'none' && document.querySelectorAll( '.show' )[ 1 ].id ) {
        show( document.querySelectorAll( '.show' )[ 1 ].id, 'content', 'showProductData' );
    }

是否可以在不干扰 show() 函数的情况下做到这一点？

当然 setInterval 会检查这个条件，但它会改变每个间隔时间显示的内容。

我只需要在每次调用 show() 函数后检查一次此条件。也许有一些棘手的方法可以让事件监听器访问该函数？类似于：

show().addEventListener( 'called', function () { above condition } );

或任何其他方法在每次调用函数 show()?

后检查 select 标签的值

编辑。我不会删除所有 post，但我可能应该删除。我会尽力澄清我的问题。

从清晰直接的角度来看，我的示例可能与我的问题无关。

每次调用函数时，每次用户单击 select 标签中的 link 或 selects 时都会调用它，我需要检查条件。使用 select 标记时，您只需要添加 'onchange' 事件侦听器，我不知道如何在用户单击 link 时检查此条件，页面不会重新加载 - 它只是显示或隐藏一些类。我无法检查 'onclick' 函数中 select 字段的值，因为我为所有 link 自动创建了所有 'onclick' 函数。

所以实现我的目标的唯一方法是为函数添加某种事件侦听器，每次调用函数时都会检查条件并执行某些操作。

Answer 1

如果我没理解错的话，你是想在动态改变值的时候触发change事件？简单。

var elem = document.getElementById('productName');
//Do what you need to do to change value.
var event = new Event('change');  // Create a new event
elem.dispatchEvent(event); // Fire the event on the element.

每次调用函数后检查条件

Check the conditions every time after function has been called

javascript

function

conditional-statements