1

この質問は、私が以前に尋ねた別の質問に関連しています。

私のページにはたくさんのテキストボックスのペアがあり、それぞれに画像が関連付けられています。クリックすると、この画像自体が非表示になり、テキストボックスのペアが読み取り専用になります。

最初の部分は機能しますが、それ自体を非表示にします。しかし、2番目の部分は機能しません。

クリックされている画像に最も近いテキストボックスのペアを「見つける」方法がわかりません。

これが私のjQueryです：

 $("body").on('click', '.pageLinks img.save', function () {
     $(this).hide();
     $(this).prevAll('input').each(function () {
         $(this).attr('readonly', 'readonly');
    });

ここに私のHTMLがあります：

<div class="pageLinks">
<div>
    <div>
        <input type="text" class="firstName">
        <input type="text" class="lastName">
    </div>
    <div>
        <img src='/saveLink.png' class='save' />
    </div>
</div>

<div>
    <div>
        <input type="text" class="firstName">
        <input type="text" class="lastName">
    </div>
    <div>
        <img src='/saveLink.png' class='save' />
    </div>
</div>

<div>
    <div>
        <input type="text" class="firstName">
        <input type="text" class="lastName">
    </div>
    <div>
        <img src='/saveLink.png' class='save' />
    </div>
</div>

4

3 に答える 3

6 
$(this).parent()
       .parent()
       .find('input[type=text]')
       .attr('readonly', 'readonly');
于 2013-11-13T20:31:08.653 に答える
1

含まれている div に、選択できるクラスを指定し、そこから下に向かって検索します。.parent().parent()これにより、はるかに脆弱な必要性が軽減されます。

HTML:

<div class="somethingMeaningful">
    <div>
        <input type="text" class="firstName" />
        <input type="text" class="lastName" />
    </div>
    <div>
        <img src='/saveLink.png' class='save' />
    </div>
</div>

...

JavaScript:

 $('body').on('click', '.save', function () {
     $(this)
         .hide()
         .closest('.somethingMeaningful')
         .find('input')
         .prop('readonly', true);
 });

closest() の作業例と ドキュメント。

于 2013-11-13T20:35:11.577 に答える
1

代わりに、要素を生成するときに要素を互いに関連付けることができます。それらが js で作成されている場合、次のようなロジックを使用できます。

var frag = document.createDocumentFragment();
for (var i=0; i<10; ++i) {
  var input = document.createElement('input');
  input.value = "Input "+i;
  var p = document.createElement('p');
  p.textContent = "Paragraph "+i;
  input.dataset.i = i;
  p.dataset.i = i;
  frag.appendChild(input);
  frag.appendChild(p);
}
document.body.appendChild(frag);

この例では、すべての入力に段落が関連付けられており、データ属性「i」で簡単に識別できます。これは、サーバー側でもすぐに生成される可能性があります。

そして、あなたはこれを次のように利用するかもしれません:

$('input').keyup(function() {
  var i = this.dataset.i; //get the assigned index "i"
  var p = $('p[data-i="'+i+'"]'); //find the associated paragraph with "i"
  p.text(this.value);
});

簡単な使用方法のデモを次に示します (ここをクリック)。

もちろん、ロジックを分離するために、ここでセレクターをクラス名に制限する必要があります (念のためdata-i、属性としても持つ他の段落タグを選択したくないでしょう。これの良い利点の 1 つは、 html の構造を変更しても、セレクターが台無しになることはありません。セレクターは、DOM 内の位置ではなく、属性によって関連付けられます。

AngularJS は、データと dom の間に自然な接続を確立する素晴らしいフレームワークであるため、このようなセレクターについて心配する必要さえありません。あなたもそれをチェックしたいかもしれません。大好きです。

于 2013-11-13T20:58:09.843 に答える