Question

我目前正在进行Sharepoint定制，遇到一个问题，如果选择了特定的元素id，我需要调用一个函数。问题是每次我们安装Sharepoint实例时元素ID都会改变，所以我的目标是通过“value”来识别元素id。为了给我的问题一些上下文，这是html（不能改变）：

<span class="ms-RadioText" title="Yes"><input id="378Ukj200" name="radio_button" value="ctl00" checked="checked" type="radio"><label for="378Ukj200">Yes</label></span>
<span class="ms-RadioText" title="No"><input id="378Ukj201" name="radio_button" value="ctl01" type="radio"><label for="378Ukj201">No</label></span>

这些是当前基于getElementID的语句（一旦我们将实例更多地生成到生产框中，它就无法工作）：

document.getElementByID('378Ukj200').onclick = new Function('checkForRadioChange("Yes");');
document.getElementByID('378Ukj201').onclick = new Function('checkForRadioChange("No");');

我希望甚至可以使用span标记来实现这一点的效果（例如，当然，由于多种原因，它永远不会起作用）：

var rispan = document.getElementsByTagName('span');

for( var i = 0, j= rispan.length; i < j; i+=1 ) {
    var classes = span[i].getAttribute("title");
    if( classes ) {
       if( classes.indexOf("Yes") != -1) {
          onclick = new Function('checkForRadioChange("Yes");');
       }
       else if( classes.indexOf("No") != -1) {
          onclick = new Function('checkForRadioChange("No");');
       }
    }
}

Answer 1

由于输入似乎是跨度的唯一输入子项，因此获得它是相当简单的：

var input = rispan[i].getElementsByTagName('input')[0]
...
input.onclick = new Function ...

http://jsfiddle.net/ExplosionPIlls/Y74bn/

您应该使用function () {}语法来定义匿名函数。 new Function对你来说似乎没那么好。此外，onlick已过时且邪恶！您应该使用addEventListener（如果存在）。否则，attachEvent。

Answer 2

我会把我的代码放在一个固定id的div中，然后让孩子们。

var nodes = document.getElementByID('div_id').children;

有了这个，我会在循环中测试tagName，并在需要它的地方附加onclick事件。

Answer 3

要匹配的结构：

<span class="ms-RadioText" title="Yes">
    <input id="378Ukj200" name="radio_button" value="ctl00" checked="checked" type="radio">
    <label for="378Ukj200">Yes</label>
</span>

输入元素的CSS选择器：

span.ms-RadioText[title="Yes"] > input[name="radio_button"]

使用允许CSS选择器的库。取胜。

Answer 4

不确定您需要什么级别的兼容性，但在现代浏览器中，它可以像以下一样简单：

var inputs = document.querySelectorAll('input[title^="ctl"]');

[].forEach.call(inputs, function(input) {
  var label = input.nextSibling;

  input.addEventListener('click', function() {
    if (label.textContent == 'Yes') {
      ...
    }
  });
});

如何通过“值”检索元素的id？

4 个答案: