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();

idこの関数は DOM 要素を返すため、たとえば次のように属性にアクセスできます。

var inputId = fetchInput().id;

基本的には、radio変数を DOM 要素への参照にしたいだけですよね? したがって、これを使用します：

var radio = fetchInput();
于 2012-07-23T20:32:27.477 に答える
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"My Own Shipping" を含むラジオ ボタンの横に表示されます 。

于 2012-07-23T20:35:32.827 に答える
0

純粋な JavaScript で前の要素を取得する場合は、previousSibling以下の関数のように、いくつかのチェックを使用してプロパティを使用できます。パラメータ n は、この場合のスパン要素です。

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 に答える
0

jQuery を使用してこれを試すことができます。

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

これにより、文字列「shippingCheck」で始まる ID を持つ要素が検索されます。

于 2012-07-23T20:29:09.787 に答える