データベースから複数のフィールドを編集可能にするにはどうすればいいですか？

Question

私は約100のレコードを持つデータベースを持っています。これらのレコードは、あなたがそれらを編集するはずのWebサイトに表示されます。

生成された結果は、現時点では次のようになります。あなたがまたは今では推測していない可能性があり得るので、これらは（この問題が無関係の）minecarft権限ある

<div class="col-md-4 col-sm-6 col-xs-12"><a href="#" id="permission" data-type="text" data-pk="1" data-url="test.php" data-title="Enter permission">bukkit.command.help</a></div> 
<div class="col-md-4 col-sm-6 col-xs-12"><a href="#" id="permission" data-type="text" data-pk="2" data-url="test.php" data-title="Enter permission">essentials.afk</a></div> 
<div class="col-md-4 col-sm-6 col-xs-12"><a href="#" id="permission" data-type="text" data-pk="3" data-url="test.php" data-title="Enter permission">essentials.list</a></div> 
<div class="col-md-4 col-sm-6 col-xs-12"><a href="#" id="permission" data-type="text" data-pk="4" data-url="test.php" data-title="Enter permission">essentials.sethome.bed</a></div> 
<div class="col-md-4 col-sm-6 col-xs-12"><a href="#" id="permission" data-type="text" data-pk="5" data-url="test.php" data-title="Enter permission">essentials.tpaccept</a></div> 
<div class="col-md-4 col-sm-6 col-xs-12"><a href="#" id="permission" data-type="text" data-pk="6" data-url="test.php" data-title="Enter permission">itemcase.buy</a></div> 

。

これらを編集するには、X-editableを使用したいと思いますが、すべて同じIDを持つため、編集できません（最初のレコードを除く）。

世代を変更して、それぞれがdata-pk要素と同じように一意のIDを取得できるようにしました。 しかし、これはjavascriptファイルに問題を引き起こすでしょう。なぜなら、私は、各要素のjavascriptのようなものを新たに追加しなければならないからです。

$.fn.editable.defaults.mode = 'inline'; 
$('#permission').editable(); 

しかし、この前に述べたようにのみ、最初の結果のために動作します：

現在の私のjavascriptのは、このようなものです。私は静的に各要素を編集可能に定義することができましたが、データの量が事前に把握されておらず動的なので不可能です。

これらのフィールドを編集可能にするにはどうすればよいですか？

Answer 1

私はあなたの構造が

<div class="row"> 
<div class="col-md-4 col-sm-6 col-xs-12"><a href="#" id="permission" ....> 
<div class="col-md-4 col-sm-6 col-xs-12"><a href="#" id="permission" ....> 
</div> 

のこの行にはJavaScriptを変更する

$('#permissions a').editable(); 

にJavaScriptコードは最終的にあなたを変え、各要素に一意のid
変更<div class="row">
<div class="row" id="permissions">にを与えるだと思いますコードは#permissions要素内のすべての<a>要素をキャッチします。詳細についてはthisをご覧ください。

Answer 2

下記のような親要素にコンテンツをラップします。

<div id="parent"> 
    <div class="col-md-4 col-sm-6 col-xs-12"> 
     <a href="#" id="permission" data-type="text" data-pk="1" data-url="test.php" data-title="Enter permission">bukkit.command.help</a> 
    </div> 
    <div class="col-md-4 col-sm-6 col-xs-12"> 
     <a href="#" id="permission" data-type="text" data-pk="2" data-url="test.php" data-title="Enter permission">essentials.afk</a> 
    </div> 
    <div class="col-md-4 col-sm-6 col-xs-12"> 
     <a href="#" id="permission" data-type="text" data-pk="3" data-url="test.php" data-title="Enter permission">essentials.list</a> 
    </div> 
    <div class="col-md-4 col-sm-6 col-xs-12"> 
     <a href="#" id="permission" data-type="text" data-pk="4" data-url="test.php" data-title="Enter permission">essentials.sethome.bed</a> 
    </div> 
    <div class="col-md-4 col-sm-6 col-xs-12"> 
     <a href="#" id="permission" data-type="text" data-pk="5" data-url="test.php" data-title="Enter permission">essentials.tpaccept</a> 
    </div> 
    <div class="col-md-4 col-sm-6 col-xs-12"> 
     <a href="#" id="permission" data-type="text" data-pk="6" data-url="test.php" data-title="Enter permission">itemcase.buy</a> 
    </div> 
</div> 

以下のセレクタを使用してハイパーリンクを繰り返し、X編集可能な関数を個別に呼び出します。

Answer 3

私は、IDをクラスに変更し、「許可」ではなく「許可」を選択することができます。