点击切换元素类型

我有一个jQuery代码，当点击任何元素时，点击任何元素都可以在点击和返回时更改元素类型。点击切换元素类型

问题是CodePen中的某些原因在点击时根本没有改变，但是在原始网站中只做了一次就没有任何结果。

的HTML

<div> 
<span class="input-group-btn"> 
    <button type="submit" class="btn btn-primary"><span class="btn"aria-hidden="true">Go</span></button> 
</span> 

</div>

的Javascript：

jQuery(document).ready(function() { 


    $.fn.changeElementType = function(newType) { 
    var attrs = {}; 

    $.each(this[0].attributes, function(idx, attr) { 
     attrs[attr.nodeName] = attr.nodeValue; 
    }); 

    this.replaceWith(function() { 
     return $("<" + newType + "/>", attrs).append($(this).contents()); 
    }); 
    } 

    $('.input-group-btn button').changeElementType('div'); 





    $(function() { 
    $(".input-group div").on("click", function(e) { 
    $('.input-group-btn div').changeElementType('button'); 

    e.stopPropagation() 
    }); 
    $(document).on("click", function(e) { 
    if ($(e.target).is(".input-group input") === false) { 
     $('.input-group-btn button').changeElementType('div'); 
    } 
    }); 
}); 


});

这里是笔： http://codepen.io/florinsimion/pen/AXxKbG

任何想法？

来源

2016-07-14 Florin Simion

在控制台上：'pen.js：4 Uncaught TypeError：无法读取未定义的属性'属性' – vaso123

我想改为添加评论，因为我要提及的是与您的实施可能的更正有关，而不是一个适当的解决方案，但不幸的是我没有足够的声誉尚未做到这一点。

我注意到你的代码存在一些问题，但我不确定它们是否有意或无意。

从HTML开始，你有这个元素<span class="btn"aria-hidden="true">Go</span>它有class="btn"。我不确定你是否真的想要它，因为它已经在其父母身上使用过。

在Javascript部分上，这里$(e.target).is(".input-group input")您期望匹配具有父类.input-group和元素本身是input的父元素。其中一个问题是，你不在HTML的任何地方使用input元素（也不能从Javascript代码中的任何元素切换）。我相信你希望它是button。另一个（我不完全确定这一点），我不认为你将永远无法匹配.is()函数的选择器，因为你使用的是嵌套选择器。目标将是事件被触发的元素，并且它有自己的类型和/或id或class。这就是你必须用来检查这是否是你想要的元素（因为你正在使用函数.is()）。

来源

2016-07-14 21:14:02 NunoM

点击切换元素类型

回答

相关问题