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 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' );
    }
} );

当用户更改选择的值时，我的条件非常有效，并显示它应该是什么。但是，用户可以单击一个链接，再次触发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标签值的任何其他方法？

EDIT。我不会删除所有帖子，但可能我应该删除。我会尽力澄清我的问题。

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

每次调用该函数时，每次用户单击链接或从select标签中选择某些内容时都会调用该函数，我需要检查该条件。使用select标签时，您只需添加'onchange'事件监听器，我不知道如何在用户单击链接时检查此情况，页面不会重新加载 - 它只显示或隐藏某些类。我无法检查'onclick'函数中select字段的值，因为我会自动为所有链接创建所有'onclick'函数。

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

Answer 1

如果我理解正确，您想在动态更改值时触发更改事件？容易。

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.

每次调用功能后检查条件

1 个答案: