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

從文本中（），使用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

這是一個輸出價格作爲flot數字（十進制）的代碼片段。
您可以將其與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>