使用 jQuery 解析 HTML 结构

Question

我希望在从 HTML 页面上的单选按钮结构中获取 "price" 字段方面得到一些帮助。它由 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

这是一个将价格输出为浮点数（十进制）的片段。
您可以将它与 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 2

由于输入是自闭标签，所以可以得到值，但不能得到文本。文本属于 <span>

的父级

使用这个获取文本：

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

要从 text() 中获取数字，使用 Permtext.lastIndexOf('£') 获取 '£' 的索引，然后使用 substring 拆分字符串，只保留 [=17 之后的字符串=]. （注意 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 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>

使用 jQuery 解析 HTML 结构

Using jQuery to parse a HTML structure

html

jquery

jquery-selectors