Question

我是JS的纯正初学者，我有一个注册模式，在该模式下，单击眼睛图标后，用户会输入键入的密码。由于样式很多，我无法使用已定义的eye类，这就是为什么我只想为处理此事件添加另一个类的原因。

我想要实现的是类似eye.closest(":has(div)").find('.vr-textfield' || '.modal_eye')的东西，但是似乎||运算符没有用，因为什么也没发生-没有错误和密码没有显示出来。这种语法正确吗？

下面的整个方法：

// For Password field, display typed password on eye click
eyeIcon.click(function(evt) {
      var eye = $(this),
          field = eye.closest(":has(div)").find('.vr-textfield' || '.modal_eye'),
          isInTextMode = field.attr('type') == 'text';
      // update field and icon view
      if (!isInTextMode) {
        field.attr('type', 'text');
        eye.attr('src', eyeIconSrc.active);
      }
      else {
        field.attr('type', 'password');
        eye.attr('src', eyeIconSrc.inactive);
      }
    });
}

view.html.erb

<div class="col-sm-12 col-md-12 col-xs-12">
  <%= f.password_field :password, class: "modal-new--registration-field vr-textfield with_icon", required: true, aria_required: true, pattern: ".{8,}" %>
  <%= image_tag "icon_eye.svg", class: "vr-textfield__icon modal_eye modal-new--registration-field-eye", alt: "Reveal password" %>
  <span class="modal-new--registration-field--invalid-msg">
    <%= t("attributes.password_requirements") %></span>
</div>

修改

好吧，我看到了很多答案，但是我可以为变量实现相同的逻辑来实现这样的事情吗？ var eyeIcon = $('.vr-textfield__icon && .eye || .modal_eye');

Answer 1

使用或运算符||时，仅当第一个运算符为 falsy 值时，它才会返回第二个运算符。在您的情况下，'.vr-textfield'始终是一个 truthy 值，因此您的代码永远不会到达'.modal_eye'。因此，在您的情况下，您必须使用multiple selector和find()：

eye.closest(":has(div)").find('.vr-textfield, .modal_eye')

Answer 2

使用or逻辑运算符时，它将传递第一个真实值，或者如果未找到真实值，则给出最终值。

赞：

"a" || "b" //"a"

"" || "b" //"b"

"" || "" //""

"" || undefined  //undefined

"" || [] // []

Answer 3

field = eye.closest(":has(div)").find('.vr-textfield' || '.modal_eye')

将不起作用，因为OR运算符引用了两个字符串“ .vr-textfield”和“ .modal_eye”。而且由于“ .vr-textfield”的计算结果为true，因此始终选择该选项。您需要对两个DOMElement进行OR运算：

var field1 = eye.closest(":has(div)").find('.vr-textfield');
var field2 = eye.closest(":has(div)").find('.modal_eye');

var field = field1.length ? field1 : field2;

它会检查field1是否有任何元素，如果是的话，将其分配给field，否则使用field2

JS按类查找一个元素（如果存在），否则使用或运算符使用其他元素

3 个答案: