javascript - 具有最接近方法的 dojoquery 在 Internet Explorer 中不起作用

Question

我正在尝试使用dojo中最接近的方法来找出我想要根据在过滤选择之一中选择的值显示/隐藏的元素的第一个父元素。它在 Firefox 浏览器中工作正常，但在 IE 中它说对象不支持 Closest。非常感谢这里的任何帮助。下面给出的是 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");
            }
        }
    });

即使我尝试相等测试来检查两个节点是否相同，但它们不是。如果我在上面的代码中执行简单的node.closest('')，则在firefox中工作正常，但是当我使用query(node).closest时('') 在 Firefox 中也不起作用。不知道我在这里缺少什么。非常感谢任何帮助。谢谢

Answer 1

我必须使用 IE 浏览器的 polyfill 来支持最接近的方法。下面的代码为我解决了这个问题。希望这可以帮助面临类似问题的人。

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