Question

是否有更清晰的方式来写这些线？

    $("input:text").each(function() {
     if ($(this).val() !== "")
        $(this).show().prev().addClass('highlighted').parent().parent().prev().prop('checked', true);
    });

编辑：一些额外的背景信息......

这是关于在进入下一个问题时保存答案的调查。在这个特定问题上，访问者可以查看复选框。但是，最后两个选项是输入字段。对于这两个输入字段，我制作了假复选框，并使用jQuery使这些复选框看起来很有用。

当您想要导航回这个问题时，您检查的常规复选框仍将被检查，但假的复选框则不会。即使输入字段具有值，也会隐藏输入字段。

我需要上面的jQuery来确保在输入字段有值时检查伪复选框。 “突出显示”类用于额外的视觉确认，您可以选中该答案。

现在这里是html。我几乎无法控制这个标记。

<input class="fake-check" type="checkbox">
<div class="question-open-question">
    <div class="form-item form-type-textfield form-item-situations-other1">
        <label for="edit-situations-other1" class="highlighted">Ik wil: </label>
        <input type="text" id="edit-situations-other1" name="situations[other1]" value="" size="60" maxlength="128" class="form-text" style="display: inline-block;">
    </div>
</div>

现在不要误会我的意思。上面的jQuery工作。我只是想知道一种更清晰的写作方式。

因此，当输入字段有值时，我想要3件事： - 显示输入字段 - 向标签添加类 - 选中复选框

Answer 1

要使您的第二个版本正常运行，您必须保存$(this).prev()并在if附近添加大括号，因为您要执行多个语句

 $("input:text").each(function() {
     if ($(this).val() !== "") {
        $(this).show();
        var prev =  $(this).prev();
        prev.addClass('highlighted');
        prev.parent().parent().prev().prop('checked', true);
    }
 });

请注意，使用prev()和parent()是一种脆弱的方式，因为对DOM的大多数更改都会破坏您的JavaScript。您应该使用类名标记要尝试访问的元素，然后使用closest()和find()

Answer 2

一个建议是将所有内容包装在容器div中，然后使用它而不是在DOM中上下跳动：

<div class="my-section">
  ...
  <span class="to-highlight">...</span>
  <input class="my-text">
  ...
  <input type="checkbox" class="my-checkbox">
</div>

那你的JS：

$(".my-section").each(function () {
    if ($(".my-text", this).val() !== "") {
        $(".my-text", this).show();
        $(".to-highlight", this).addClass("highlighted");
        $(".my-checkbox", this).prop("checked", true);
    }
});

这样，您的代码就可以很好地包含在一个元素中。它不太可能打破HTML结构的变化，并且不会干扰其范围之外的元素。我通常建议避免使用与HTML结构紧密结合的函数，例如parent()和prev()。

Answer 3

$("input:text").each(function() {
  var $t=$(this);
  if ($t.val() !== "") {
    $t.show().prev().addClass('highlighted').end().parent().parent().prev().prop('checked', true);
  }
});

使用.end()返回上一个选择器（在这种情况下为$(this)而不是$(this).prev()）。

有没有更清晰的方式来编写这些jQuery行？

3 个答案: