最接近方法的 dojoquery 在 Internet Explorer 中不起作用

Question

我正在尝试使用 dojo 中的 closest 方法来找出我想要 show/hide 的第一个元素的第一个父元素 select 在其中一个过滤 select 中编辑].它在 firefox 浏览器中工作正常，但在 IE 中它说对象不支持最近。非常感谢这里的任何帮助。下面给出的是 html 和 js 代码的示例。

HTML

<div class="pvrProperty pvrLayoutItem pvrPropertyRequired" id="pvr_widget_Property_3" widgetId="pvr_widget_Property_3">
<label class="pvrPropertyLabel" id="pvr_widget_Property_3_label" for="pvr_widget_editors_FilteringSelectEditor_0" data-dojo-attach-point="_labelNode">Product Type</label>
<div class="pvrPropertyEditor" data-dojo-attach-point="_editorNode">
<div class="dijitReset dijitInline idxComposite idxFilteringSelectWrap dijitValidationTextBox idxFilteringSelectWrapRequired dijitValidationTextBoxRequired dijitRequired idxFilteringSelectWrapIncomplete dijitValidationTextBoxIncomplete dijitIncomplete idxFilteringSelectWrapIncompleteRequired dijitValidationTextBoxIncompleteRequired dijitIncompleteRequired pvrEditor pvrFilteringSelectEditor" id="widget_pvr_widget_editors_FilteringSelectEditor_0" widgetId="pvr_widget_editors_FilteringSelectEditor_0">
</div>
</div>
</div>
<div class="pvrProperty pvrLayoutItem pvrPropertyRequired" id="pvr_widget_Property_4" widgetId="pvr_widget_Property_4">
<label class="pvrPropertyLabel" id="pvr_widget_Property_4_label" for="pvr_widget_editors_FilteringSelectEditor_1" data-dojo-attach-point="_labelNode">Document Type</label>
<div class="pvrPropertyEditor" data-dojo-attach-point="_editorNode">
<div class="dijitReset dijitInline idxComposite idxFilteringSelectWrap dijitValidationTextBox idxFilteringSelectWrapRequired dijitValidationTextBoxRequired dijitRequired idxFilteringSelectWrapIncomplete dijitValidationTextBoxIncomplete dijitIncomplete idxFilteringSelectWrapIncompleteRequired dijitValidationTextBoxIncompleteRequired dijitIncompleteRequired pvrEditor pvrFilteringSelectEditor" id="widget_pvr_widget_editors_FilteringSelectEditor_1" widgetId="pvr_widget_editors_FilteringSelectEditor_1">
</div>
</div>
</div>
<div class="pvrProperty pvrLayoutItem pvrPropertyRequired" id="pvr_widget_Property_5" widgetId="pvr_widget_Property_5">
<label class="pvrPropertyLabel" id="pvr_widget_Property_5_label" data-dojo-attach-point="_labelNode">Document Type Others</label>
<div class="pvrPropertyEditor" data-dojo-attach-point="_editorNode">
<input type="textbox"></input>
</div>
</div>

Javascript:

query(".pvrPropertyLabel").forEach(function(node){
        var labelName=node.innerHTML;
        if(labelName=="Document Type"){
            alert("lableName"+labelName);
            filtertingSelectId=domAttr.get(node,"for");
            var temp=dijit.byId(filtertingSelectId).get('value');
            alert("value of filtering select is:"+temp);
        }
        else if(labelName=="Document Type Others"){
            alert("lableName"+labelName);
            //alert("query(labelNodes[i])"+query(labelNodes[i]));
            alert("equality test"+node===query(node));
            var parentNode=query(node).closest(".pvrProperty");/*node.closest(".pvrProperty") works fine here but not query(node)*/
            var spanNode=query(node).closest(".pvrPropertyLabelWrapper");
            domStyle.set(spanNode,{"width":"175px"});
            var propEditnode=dijit.byId(filtertingSelectId);
            alert("parentNode:"+parentNode);
            alert("parentNode id"+domAttr.get(parentNode,"id"));
            //var dropdownId=domAttr.get(labelNodes[i],"for");
            if(propEditnode.get('value')=="Other"){
                alert("other");
                domClass.remove(parentNode,"pvrLayoutItemHidden");
                domClass.remove(parentNode,"pvrPropertyHidden");
                domClass.add(parentNode,"pvrLayoutItem");
            }else{
                alert("not other");
                domClass.add(parentNode,"pvrLayoutItemHidden");
                domClass.add(parentNode,"pvrPropertyHidden");
                domClass.remove(parentNode,"pvrLayoutItem");
            }
        }
    });

甚至我尝试了相等性测试来检查两个节点是否相同但它们是 not.If 我在上面的代码中做简单的 node.closest('') 在 firefox 中工作正常但是当我使用query(node).closest('') 在 firefox 中也不起作用。不知道我在这里错过了什么。任何帮助都是真的appreciated.Thanks

Answer 1

我不得不为 IE 浏览器使用 polyfill 来支持最接近的 method.Below 代码为我解决了这个问题。希望这对面临类似问题的人有所帮助。

        if (window.Element && !Element.prototype.closest) {
              Element.prototype.closest = 
              function(s) {
                  var matches = (this.document || this.ownerDocument).querySelectorAll(s),
                      i,
                      el = this;
                  do {
                      i = matches.length;
                      while (--i >= 0 && matches.item(i) !== el) {};
                  } while ((i < 0) && (el = el.parentElement)); 
                  return el;
              };
            }
        query(".pvrPropertyLabel").forEach(function(node){
            var labelName=node.innerHTML;
            if(labelName=="Document Type"){
                //alert("lableName"+labelName);
                filtertingSelectId=domAttr.get(node,"for");
                var temp=dijit.byId(filtertingSelectId).get('value');
                //alert("value of filtering select is:"+temp);
            }
            else if(labelName=="Document Type Others"){
                //alert("lableName"+labelName);
                //alert("query(labelNodes[i])"+query(labelNodes[i]));
                var lableId=domAttr.get(node,"id");
                //alert("labelId:"+lableId);
                var parentNode=node.closest(".pvrProperty");
                var spanNode=node.closest(".pvrPropertyLabelWrapper");
                domStyle.set(spanNode,{"width":"175px"});
                var propEditnode=dijit.byId(filtertingSelectId);
                //alert("parentNode:"+parentNode);
                //var dropdownId=domAttr.get(labelNodes[i],"for");
                if(propEditnode.get('value')=="Other"){
                    domClass.remove(parentNode,"pvrLayoutItemHidden");
                    domClass.remove(parentNode,"pvrPropertyHidden");
                    domClass.add(parentNode,"pvrLayoutItem");
                }else{
                    domClass.add(parentNode,"pvrLayoutItemHidden");
                    domClass.add(parentNode,"pvrPropertyHidden");
                    domClass.remove(parentNode,"pvrLayoutItem");
                }
            }
        });

最接近方法的 dojoquery 在 Internet Explorer 中不起作用

dojoquery with closest method not working in Internet Explorer

javascript

jquery

dojo