1

当前的 HTML 片段：

<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 代码段：

<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、类或以任何方式更改那里生成的实际 html。

4

5 回答 5

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();
于 2012-07-23T20:32:27.477 回答
0

您可以使用 jQuery 进行尝试：

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

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

于 2012-07-23T20:29:09.787 回答
0 
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]);
于 2012-07-23T20:35:32.270 回答
0

试试这个：

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

.ShipperName它会在包含“我自己的运输”的旁边找到一个单选按钮 。

于 2012-07-23T20:35:32.827 回答
0

如果您想通过纯 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 并用它做一些事情。

请参阅此处的示例。

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

于 2012-07-23T21:04:57.387 回答