2

重複の可能性：
タグ名を変更しますが、すべての属性は保持します

<a>タグをタグに置き換えて、その<span>すべての属性を保持することは可能ですか？

私はこのHTMLを持っており、誰かが[編集]をクリックすると、すべての編集リンクがスパンに変換されます

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

ユーザーが編集を終えたら（[保存]または[キャンセル]を押して）、すべてのスパンタグをリンクに変換し直します。

$(".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 
$(".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 に答える
1

FAngel が示すように、この場合、スタイルの変更ははるかに簡単です。今後のjQuery バージョンでは削除される.liveため、例の代わりにイベント委任を使用します。.live

$(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 に答える
0

私はあなたがあなたの問題を解決したい方法が好きではないことに加えて、ここに1つの可能な解決策があります：

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 に答える
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

私は2つのコンテナを使用します：linksとedit-links

編集ボタンが押されると、コンテナ リンクからedit-linksのすべての<a>タグが div に変換されて入力されます。<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 に答える