Question

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

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

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

我无法弄清楚如何“找到”最接近被点击图像的文本框对。

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

Answer 1

$(this).parent()
       .parent()
       .find('input[type=text]')
       .attr('readonly', 'readonly');

Answer 2

我会给包含的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);
 });

Working example和 documentation for closest()

Answer 3

您可以在生成元素时将元素相互关联。如果它们是用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);
});

Here's a demo of a simple usage (click here).

当然，您需要将此处的选择器限制为某个类名以隔离您的逻辑（您不希望选择其他一些也具有data-i作为属性的段落标记，以防万一。这样做的一个很好的优点是，如果改变html的结构，你不会搞砸你的选择器 - 它们是按属性关联的，而不是它们在dom中的位置。

AngularJS是一个非常棒的框架，它可以在您的数据和dom之间建立自然的联系，因此您甚至不必担心像这样的选择器。你甚至可能想要检查出来。我喜欢它。

使用jquery设置输入元素的属性

3 个答案: