Question

我有一个带有大量复选框和textareas的表单。选中复选框后，将显示关联的textarea。这很好。

但是，我调用了一个数据库，如果进行了某个查询，该数据库将获取信息以使用数据填充textareas。 HTML的一个例子如下：

<li>
  <input type="checkbox" id="changes-trigger" />
  <label for="changes-trigger">Changes</label>
  <textarea id="changes" name="changes" rows="6" cols="40"><?php echo $report['changes']; ?></textarea>
</li>

如果将数据加载到textarea中，我希望选中复选框并显示textarea。如果我使用id专门定位textarea，我可以按照我的意愿在页面加载时执行：

if($('#changes').val()) {
  $('#changes-trigger').prop('checked','true');
  $('#changes').show();
}

但是，正如我所说的，我有很多这些并且不想为每个人编码。这不仅不是我想要的，它打破了我的外部.js文件的其余部分。任何人都可以建议为什么以下不起作用？

if($('textarea').val()) {
  $(this).siblings('input').prop('checked','true');
  $(this).show();
}

Answer 1

我建议使用each以这种方式迭代所有textarea：

$('textarea').each(function () {
    if($(this).val()) {
        $(this).siblings('input').prop('checked','true');
        $(this).show();
    }
});

Answer 2

$('textarea').val()会引用您网页上的所有“textarea”元素，请尝试 -

$('textarea').each(function() {
    if($(this).val()) {
      $(this).siblings('input').prop('checked','true');
      $(this).show();
    }
})

这应该遍历页面上的所有文本框并将逻辑应用于每个文本框。

Answer 3

您希望this现在引用页面上的textareas集合，因为您在if中引用它们并且它不会这样做 - 它不会在函数内部发生变化

你可以做到

$('div#abc textarea').each(function() {
    if($(this).val()) {
        $(this).siblings('input[type=checkbox]').prop('checked','true');
        $(this).show();
    }
});

代替。我建议你只搜索给定div或类似内容中的textareas（这里有id abc），并且只更新正确类型的输入！

Answer 4

this上下文指向window对象，除非它已被事件回调或.call或.apply更改。

相反，请使用：

var $textarea = $('textarea');
if($textarea.val()) {
  $textarea.siblings('input').prop('checked','true');
  $textarea.show();
}

Answer 5

使用TEXTAREA选择器将返回页面上所有textarea的数组。将.val()应用于此将仅返回DOM树中第一个textarea的值。小提琴证明：http://jsfiddle.net/sc4vc/

您需要使用.each()方法获取每个textarea的具体值

$('textarea').each(function() {
    if ($(this).val()) {
        $(this).siblings('input').prop('checked','true');
        $(this).show(); 
    }
}

如果使用$（this）但jQuery'if'不工作但是使用id

5 个答案: