2

可能重复：
更改标签名称但保留所有属性

是否可以用<a>标签替换<span>标签并保留其所有属性？

我有这个 HTML，当有人点击编辑时，我想将所有编辑链接转换为跨度

<a href="javascript:void(0);" class="edit" data-id="123">Edit</a>

一旦用户完成编辑（通过按Save或Cancel），我想将所有 span 标签转换回链接。

$(".edit").live("click", function(){
    $(".edit").addClass("inactive-link");
});
4

6 回答 6

3

这应该适合您的需求：

function switchTag(e, toTag) {
    var outerHTML = e.outerHTML;
    outerHTML = outerHTML.replace(/^<([a-z])(.*?)>(.*?)<\/\1>$/ig, "<" + toTag + "$2>$3</" + toTag + ">");
    e.outerHTML = outerHTML;
};

使用示例：

$(".edit").click(function() {
    switchTag(this, "span");
});

演示可用；）

于 2013-01-14T18:58:51.407 回答
1

正如 FAngel 所指出的，在这种情况下，样式更改要简单得多。我将继续使用事件委托而不是.live在我的示例中，因为.live将在以后的 jQuery 版本中删除：

$(document).on('click', '.edit', function (e) {
   //add inactive class to *this* link
   $(this).addClass('inactive-link');

   //stop default link behavior, i.e. opening a new page
   e.preventDefault();
});
于 2013-01-14T18:54:35.593 回答
1 
$(".edit").live("click", function(e){
    if(!$(e.target).hasClass("inactive-link")) { //suppose $(this) will work instead of $(e.target), but do not remember for sure
         $(".edit").addClass("inactive-link");// after this is done - this function will not execute anymore for .edit elements because of previouse if statement
         //code to start editing
    }
});

只需检查单击的元素是否具有类 inactive-link。并在编辑完成后将其删除。

基本上，链接没有“禁用”功能。但是你可以在编辑模式下取消绑定事件处理程序，或者检查链接是否有一些类，就像我上面的代码一样。

另外，请注意 live 已被弃用，你应该更好地使用.on（如果你有一些最新的 jQuery，v1.7 和更高版本）。在这里你可以找到如何live替换on

于 2013-01-14T18:57:20.750 回答
0 
// Replacement Tag
var replacementTag = 'span';

$('a').each(function() {
    var outer = this.outerHTML;

    // Replace opening tag
    var regex = new RegExp('<' + this.tagName, 'i');
    var newTag = outer.replace(regex, '<' + replacementTag);

    // Replace closing tag
    regex = new RegExp('</' + this.tagName, 'i');
    newTag = newTag.replace(regex, '</' + replacementTag);

    $(this).replaceWith(newTag);
});

链接http://jsfiddle.net/tTAJM/19/

于 2013-01-14T18:54:35.410 回答
0

我会使用两个容器：links和edit-links

按下编辑按钮时，我将使用从容器链接转换为edit-links的所有标签填充 div<a><span>

当按下保存按钮时，我会重新创建容器<a>中的所有标签。links

$('#myButtonEdit').click(function(){        
    $('#links').hide();
    $('#edit-links').empty();

    //loop on all <a> tags to create <span> in edit-links div
    $('a').each(function(){
        $('#edit-links').append('<span id="'+this.id+'" class="'+$(this).attr('class')+'">'+$(this).attr('href')+'</span>');
    });
});

$('#myButtonSave').click(function(){

    $('#edit-links').hide();
    $('#links').empty();

    //loop on all <span> tags to create <a> in links container
    $('#edit-links span').each(function(){
        $('#links').append('<a id="'+this.id+'" class="'+$(this).attr('class')+'" href="'+$(this).html()+'">'+$(this).html()+'</span>');
    });
});
于 2013-01-14T19:03:27.947 回答
0

除了我不喜欢您解决问题的方式之外，这是一种可能的解决方案：

function replaceElement(el, tagName) {
  var attrs = {
    text: el.innerHTML
  };
  $.each(el.attributes, function() {
    attrs[this.nodeName] = this.nodeValue;
  });
  $(el).replaceWith($("<" + tagName + " />", attrs));
}

$("a.edit").on("click", function() {
  replaceElement(this, "span");
});

演示：http: //jsfiddle.net/rxzdK/

这里的新元素将包含被替换元素的所有属性。但是，您应该考虑根据标准<span>不应该具有属性。src

于 2013-01-14T19:10:50.487 回答