1

这个问题与我之前提出的另一个问题有关。

我的页面上有一堆文本框对，每个文本框都有一个与之关联的图像。单击时，此图像应隐藏自身，并使这对文本框成为只读的。

第一部分有效，它确实隐藏了自己。但第二部分不起作用。

我不知道如何“找到”最接近被点击图像的一对文本框。

这是我的 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);
 });

最近（）的工作示例和 文档。

于 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属性的其他段落标记，以防万一。这样做的一个很好的优点是您如果您更改 html 的结构，不会弄乱您的选择器 - 它们是通过属性关联的，而不是通过它们在 dom 中的位置。

AngularJS 是一个很棒的框架，它在你的数据和 dom 之间建立了一个自然的连接，所以你甚至不需要担心像这样的选择器。您甚至可能想检查一下。我喜欢它。

于 2013-11-13T20:58:09.843 回答