Jquery：クリックした要素の現在のIDを取得して名前を変更するにはどうすればよいですか？

Question

私は、idが設定されたhtmlブロックを使用するdrag n dropウェブサイトビルダーを持っています。ブロックがキャンバスにドロップされると、各ブロックのIDにリンクするナビゲーションメニューを作成する必要があります。クリックしたブロックの現在のIDを取得して名前を変更するにはどうすればよいですか？以下は

は、私が試したものですが、それはいくつかの問題があります（私は、テキストを入力する場合はNaNを与える）、それが整数のみを受け付け

はブロックの名前を表示しません

1. を
2. は、それはちょうど私が

をクリックしたブロックのIDを変更するのではなく、キャンバス上のすべてのブロックのIDを変更します。

PHPのページ（index.phpを）

<div class="setting opt"> 
    <div class="dropdown"> 
     <a class="icons" data-toggle="dropdown" href="#settings"></a> 
     <ul class="dropdown-menu "> 
     <li><a href="#" id="blockName" tabindex="-1">Edit Block Name</a></li> 
     </ul> 
    </div> 
    </div> 
<section class="builder_block" id="header_2"></section> 
<section class="builder_block" id="content_5"></section> 
<section class="builder_block" id="footer_9"></section> 

jQueryのページ（editor.js）jqueryので

$(document).on("click", "#blockName", function(e) { 
e.preventDefault(),toastr.info("Block Renamed."); 
    var bname = prompt("Please enter your new block name"); 
    var myblockName = $("section.builder_block").attr("id", +bname); 
}); 

Answer 1

は、あなたが使用することができます。

$(this).attr('id', [new-value]); 

作業中例：divのidを取得し、更新された新しいidでそれを置き換えるために例の各ボックスに

$(document).ready(function(){ 
 

 
    $('div[id^="block-"]').click(function(){ 
 
     $(this).attr('id','new-' + $(this).attr('id')); 
 
     $(this).html($(this).html().replace('block','new-block')); 
 
    }); 
 

 
});

div { 
 
display: inline-block; 
 
margin: 6px; 
 
padding: 6px; 
 
color: rgb(255,255,255); 
 
background-color: rgb(255,0,0); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="block-1">My <em>id</em> is <strong>block-1</strong></div> 
 
<div id="block-2">My <em>id</em> is <strong>block-2</strong></div> 
 
<div id="block-3">My <em>id</em> is <strong>block-3</strong></div>

クリックします。

var blocks = document.querySelectorAll('div[id^="block"]'); 
 

 
function updateId() { 
 
var id = this.id; 
 
id = id.replace('block','new-block'); 
 
this.id = id; 
 

 
var html = this.innerHTML; 
 
html = html.replace('block','new-block'); 
 
this.innerHTML = html; 
 
} 
 

 
for (var i = 0; i < blocks.length; i++) { 
 
    blocks[i].addEventListener('click',updateId,false); 
 
}

div { 
 
display: inline-block; 
 
margin: 6px; 
 
padding: 6px; 
 
color: rgb(255,255,255); 
 
background-color: rgb(255,0,0); 
 
}

<div id="block-1">My <em>id</em> is <strong>block-1</strong></div> 
 
<div id="block-2">My <em>id</em> is <strong>block-2</strong></div> 
 
<div id="block-3">My <em>id</em> is <strong>block-3</strong></div>