更改现有代码以根据接近度进行选择

Question

当前 HTML sn-p:

<ul class="ShippingProviderList">
  <li>
    <label id="shippingMethod_500dae76abe48_0">
      <input id="shippingCheck_500dae76abe48" type="radio" value="0" name="selectedShippingMethod[500dae76abe48]" />
      <span class="ShipperName">My Own Shipping Account (Please make sure that account number is specified within your account page or item will not ship!)</span>
      <em class="ShipperPrice ProductPrice">$0.00</em>
    </label>
  </li>
  <li> 2nd option may or may not be here </li>
</ul>

当前的 Javascript sn-p：

<script>
var radio = document.getElementById('shippingCheck_500d6aa9a300e'),
var input1 = document.getElementById('FormField_25'),
input2 = document.getElementById('FormField_26'),
btn = document.getElementById('ML20').getElementsByTagName('input')[0];

btn.onclick = function(e) {
if( radio.checked && input1.value.length >= 20 && input2.value.length >= 20 ) {
    alert('Please provide a Shipping Account Number in either the Billing or Shipping sections in order to use your own Shipping Account.');
    e.preventDefault(); // we all stop the submit from happening.
    e.stopPropagation();
    return false;
}
// otherwise do something or nothing and let the submit happen.
};
</script>

问题是500d运费支票是随机生成的，我无法控制。是否可以通过使用包含 My Own Shipping 术语的跨度类“ShipperName”来调整 Javascript 以提取正确的数据，然后在此之前拉出输入字段？还是有更好的方法来做到这一点，我错过了？我无法分配 ID、Class 或以任何方式更改那里生成的实际 html。

Answer 1

如果 jQuery 是可以接受的，你可以使用这个：

$("input[id^='shippingCheck']")

使用普通的Javascript，你可以使用这个功能：

function wildcard(startingId){
  // get all inputs
  var inputs = document.getElementsByTagName("input");
  // iterate over them
  for ( var i = 0; i < inputs.length; i++ ) {

    if ( inputs[i].nodeType === 1 ) {
      // id start with 'shippingCheck' ?
      if (inputs[i].id.indexOf(startingId) == 0)
      {
         return inputs[i];
      }
    }
  }
}

然后这样称呼它：

wildcard("shippingCheck")

---

你可以试试这个：

function fetchInput() {
    var input;
    $(".ShipperName").each(function() {
        if ($(this).text().indexOf("My Own Shipping Account") != -1)
        {
            input = $(this).prev().get(0);
            return;
        }
    });
    return input;
}

然后这样称呼它：

fetchInput();

函数返回DOM元素，所以可以访问id属性，例如，像这样：

var inputId = fetchInput().id;

---

您基本上只是希望您的 radio 变量成为对 DOM 元素的引用，对吗？所以你会使用这个：

var radio = fetchInput();

Answer 2

你可以用 jQuery 试试这个：

var radio = $('[id^="shippingCheck"]');

这将找到一个 id 以字符串“shippingCheck”开头的元素。

Answer 3

var spans = ​document.getElementsByTagName("span"),​​​​​​ span, i, len, node;

​for (i = 0, len = spans.length; i < len; i++) {
    span = spans[i];
    if (span.innerHTML.match(/My Own Shipping/)) {
        node = span;
        while (node && node.nodeName !== "INPUT") {
            node = node.previousSibling;
        }
        console.log(node);  // This is the input element before that SPAN.
        break;        
    }
}

一个 DOM 遍历库会让这一切变得更简单。​​例如，使用 jQuery：

console.log($("span:contains(My Own Shipping)").prev("input")[0]);

Answer 4

试试这个：

var radio = $('.ShipperName:contains("My Own Shipping")').siblings(':radio');

它会在 .ShipperName 旁边找到一个单选按钮，其中包含“My Own Shipping”。

Answer 5

如果你想通过纯javascript获取前一个元素，你可以使用previousSibling属性进行一些检查，如下面的函数。在您的情况下，参数 n 是 span 元素。

function getPreviousSibling(n) {
    var x = n.previousSibling;
    while (x.nodeType != 1) { // check if it's an element node
        x = x.previousSibling;
    }
    return x;
}

但是，如果您使用类“ShipperName”获得跨度的前一个输入元素，您将获得多个无线电输入（因为列表中可能有多个项目）。你仍然需要做一些额外的事情来得到你想要的，但至少你可以使用无线电输入的 id 并用它做一些事情。

见the example here。

如果你使用 jQuery，选择元素会更容易。