點擊切換元素類型

我有一個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

點擊切換元素類型

回答

相關問題