Question

我试图通过javascript抓住每个LI组上方的隐藏字段的值，我不能使用jQuery，因为客户关注不合理（相信我，我已经尝试过，他们只是不想要“冒险”添加图书馆... ...无论如何......

列表看起来像这样：

<input id="hidden1" type="hidden" value="5" class="includeds">
<h3>header</h3>
<ul class="groups">
    <li><input id="li1" type="checkbox" value="1" onclick="value()"></li>
    <li><input id="li2" type="checkbox" value="2" onclick="value()"></li>
    <li><input id="li3" type="checkbox" value="3" onclick="value()"></li>
</ul>
<input id="hidden2" type="hidden" value="3" class="includeds">
<h3>header2</h3>
<ul class="groups">
    <li><input id="li4" type="checkbox" value="4" onclick="value()"></li>
    <li><input id="li5" type="checkbox" value="5" onclick="value()"></li>
    <li><input id="li6" type="checkbox" value="6" onclick="value()"></li>
</ul>

因此，如果我点击复选框li1，我想从其上方的隐藏字段中检索值"5"。

如果我点击li5，我想从其上方的第一个隐藏字段获取"2"的值等等。

在之前的SO问题中，一些了不起的人帮助我用jQuery做到了这一点：

if($(this).closest('ul').prevAll('.includeds:first').val() !== '0') { 
      // logic here
}

但是当提交给客户时，我遇到了上述投诉。所以现在我需要用javascript vanilla做同样的事情。我感谢你们提供的任何帮助或指示。我为在jquery和javascript之间问两次同样的问题而道歉。

Answer 1

嗯，我使用的jQuery代码是：

$(this).parent().prev().prev().val()

考虑到这一点，您所要做的就是重写代码以纠正普通的javascript实体。

结果如下：

function getParent(node){
    return node.parentNode;
}

function getPrev(node){
    do { // loop to find the previous node that is an element
        node = node.previousSibling;
    }while(node && node.nodeType != 1);
    return node;
}

getPrev(getPrev(getParent(this))));

Answer 2

如果你不能使用jQuery，那么你提到的复杂查询变得更加困难。在jQuery中，最简单的方法是通过ID标记或类过滤器（取决于场景）来引用元素。

我想说最好的办法是将给定的input ID硬编码到onclick函数中。

HTML

<input id="hidden2" type="hidden" value="3" class="includeds">
<h3>header2</h3>
<ul class="groups">
    <li><input id="li4" type="checkbox" value="4" onclick="value('hidden2')"></li>
    <li><input id="li5" type="checkbox" value="5" onclick="value('hidden2')"></li>
    <li><input id="li6" type="checkbox" value="6" onclick="value('hidden2')"></li>
</ul>

的JavaScript

function value(id) {
  var elem = document.getElementByID(id);
  ...
}

找到最近隐藏字段的值，位于用户点击javascript之上

2 个答案: