使用 jQuery 解析 HTML 结构

Question

我希望在从 HTML 页面上的单选按钮结构中获取“价格”字段时获得一些帮助。它由 1 到 4 个单选按钮组成。只会检查 1 个。每个单选按钮的结构如下：

<span class="ajs-attr" id="v_5532_1_1"><input type="radio" name="v_5532_1" value="1" checked="checked"  onclick="ChoiceChanged(this, 'http://www.tgurney.co.uk/cgi-bin/dx000003.pl', 397)"> Fat Quarter &#58;  £2.75</span>

这个被选中了。每个单选按钮之间的唯一区别是id= 字段和value= 字段。

我需要得到的是结构末尾的价格（如果可能，作为一个数字）。在这种情况下，“2.75 英镑”。我需要它用于选中的单选按钮。

我对 HTML 和 jQuery 非常陌生，所以我真的希望有人可以帮助我编写代码。

到目前为止，我通过以下方式获得了价值：

Perm = $('input[name=' + ButtonName+ ']:checked').val(); 

在哪里ButtonName = "v_5532_1"。

在那之后我很难获得任何文本。我很可能使用了错误的 jQuery 代码。

Answer 1

由于输入是自闭合标签，因此您可以获取值但不能获取文本。该文本属于父级，即<span>

使用它来获取文本：

Perm = $('input[name=' + ButtonName+ ']:checked').parent().text(); 

要从 text() 中获取数字，请使用 Permtext.lastIndexOf('£') 获取 '£' 的索引，然后使用 substring 拆分字符串并仅保留 £ 之后的字符串。 （注意lastIndexOf 将针对字符串中的最后一个£，所以如果你之前有£，它只取最后一个）

Permtext... 之前的+ 将强制字符串成为类型号。

$('input[type=radio]').on('click', function() {
  var Perm = $('input[type=radio]:checked');
  var Permtext = Perm.parent().text();
  var price = +Permtext.substring(Permtext.lastIndexOf('£') + 1);

  console.log('Perm text -->' + Perm.parent().text());
  console.log('Perm val  -->' + Perm.val());
  console.log('Perm number       -->' + price);
  console.log('type of Perm num  -->' + typeof(price));

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="ajs-attr" id="v_5532_1_1"><input type="radio" name="v_5532_1" value="1" > Fat Quarter &#58;  £2.75</span>
<span class="ajs-attr" id="v_5532_1_2"><input type="radio" name="v_5532_1" value="2" > Fat Quarter &#58;  £55.55</span>

Answer 2

这是一个将价格输出为浮点数（十进制）的 sn-p。
您可以将它与price 变量一起使用。

var price=0;

$(".ajs-attr input[type='radio']").on("change",function(){
  if( $(this).is(":checked") ){
    console.log( "TEXT: "+$(this).parent().text() );
    
    var textPrice = $(this).parent().text();
    price = parseFloat(textPrice.split("£")[1]);  // This value type is floating number (decimal)
    console.log( price );
  }
});

// I don't know what this function is...
// So just to avoid a script error, it is defined empty.
function ChoiceChanged(a,b){}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span class="ajs-attr" id="v_5532_1_1"><input type="radio" name="v_5532_1" value="1" checked="checked"  onclick="ChoiceChanged(this, 'http://www.tgurney.co.uk/cgi-bin/dx000003.pl', 397)"> Fat Quarter &#58;  £2.75</span>
<br>
<span class="ajs-attr" id="v_5532_1_2"><input type="radio" name="v_5532_1" value="1" checked="checked"  onclick="ChoiceChanged(this, 'http://www.tgurney.co.uk/cgi-bin/dx000003.pl', 397)"> Slim Quarter &#58;  £5.85</span>

Answer 3

看看这是否有帮助。

$(function() {

  if (document.getElementById('v_5532_1').checked) {
    console.log($('input[name=v_5532_1]:checked').val());
  } else if (document.getElementById('v_5532_2').checked) {
    console.log($('input[name=v_5532_2]:checked').val());
  } else if (document.getElementById('v_5532_3').checked) {
    console.log($('input[name=v_5532_3]:checked').val());
  } else if (document.getElementById('v_5532_4').checked) {
    console.log($('input[name=v_5532_4]:checked').val());
  }


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="price">
  <span class="ajs-attr"><input type="radio" name="v_5532_1" value="2.75" id="v_5532_1" > Fat Quarter &#58;  £2.75</span>

  <span class="ajs-attr"><input type="radio" name="v_5532_2" value="4.75" id="v_5532_2" > Fat Quarter &#58;  £4.75</span>

  <span class="ajs-attr"><input type="radio" name="v_5532_3" value="10.75" id="v_5532_3" checked> Fat Quarter &#58;  £10.75</span>

  <span class="ajs-attr"><input type="radio" name="v_5532_4" value="5.75" id="v_5532_4"> Fat Quarter &#58;  £5.75</span>

</div>