Question

我的任务是编写一些javascript来为比赛添加比萨饼。我有一个＆＃39;添加到购物篮＆＃39;需要获取比萨饼的名称，描述，尺寸和价格的按钮。

目前，我已设法从“添加到购物篮”中获取披萨的名称和描述。按钮，但我还需要获得比萨饼的价格和大小，这是根据用户选择的单选按钮确定的。

html代码是给我的。

<td>   
    <table border="0" cellpadding="0">
        <tbody>
            <tr align="center">
                <td>
                    <input id="size" name="Cheese" data-price="6.50" value="Small" type="radio" checked>Small
                </td>
                <td>
                    <input id="size" name="Cheese" data-price="8.50" value="Medium" type="radio">Medium
                </td>
                <td>
                    <input id="size" name="Cheese" data-price="9.99" value="Large" type="radio">Large
                </td>
            </tr>
            <tr align="center">
                <td style="padding-top: 6px">£6.50</td>
                <td style="padding-top: 6px">£8.50</td>
                <td style="padding-top: 6px">£9.99</td>
            </tr>
        </tbody>
    </table> 
</td>
<td>
    <input id="addbasket" name="Cheese" data-description="Mozzarella cheese" value="Add to Basket" type="button" onclick="addBasket(this)"> 
</td>

这是javascript，我还被要求将NodeList转换为数组，然后通过该数组进行过滤以获取已检查的单选按钮，我认为我已经使用前两行完成了。

function addBasket(button) {
    var nodes = [].slice.call(document.getElementsByName(name));
    var radio = nodes.filter(function(el){return el.checked;})[0];

    var pizzaname = button.name;
    var pizzadesc = button.getAttribute('data-description');

    var pizzaprice = radio.dataset.price;
}

现在我不知道如何获得数据价格＆＃39;和价值＆＃39; （单选按钮的大小）来自单选按钮。

Answer 1

您可以使用radio.getAttribute('data-price')来获取披萨的价格，并使用radio.value来获取披萨的大小。另请注意，您可以通过在NodeList上使用[].slice.call来避免使用[].filter.call。

var name = 'Cheese'

function addBasket(button) {
  var nodes = document.getElementsByName(button.name)
  var radio = [].filter.call(nodes, function(e) {
    return e.checked
  })[0]

  var pizzaname = button.name
  var pizzadesc = button.getAttribute('data-description')

  var pizzasize = radio.value
  var pizzaprice = radio.getAttribute('data-price')

  console.log({
    Name: pizzaname,
    Description: pizzadesc,
    Size: pizzasize,
    Price: pizzaprice
  })
}

<td>
  <table border="0" cellpadding="0">
    <tbody>
      <tr align="center">
        <td>
          <input name="Cheese" data-price="6.50" value="Small" type="radio" checked>Small
        </td>
        <td>
          <input name="Cheese" data-price="8.50" value="Medium" type="radio">Medium
        </td>
        <td>
          <input name="Cheese" data-price="9.99" value="Large" type="radio">Large
        </td>
      </tr>
      <tr align="center">
        <td style="padding-top: 6px">£6.50</td>
        <td style="padding-top: 6px">£8.50</td>
        <td style="padding-top: 6px">£9.99</td>
      </tr>
    </tbody>
  </table>
</td>
<td>
  <input id="addbasket" name="Cheese" data-description="Mozzarella cheese" value="Add to Basket" type="button" onclick="addBasket(this)">
</td>

Javascript获取选定的单选按钮值

1 个答案: