Question

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

有什么想法吗？

Answer 1

我想添加评论，因为我要提及的是与您的实施可能的更正有关，而不是一个正确的解决方案，但遗憾的是我还没有足够的声誉来做到这一点。

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

从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或类。这就是你必须用来检查这是否是你想要的元素（因为你正在使用函数.is()）。

单击时切换元素类型

1 个答案: