选中收音机时获取带有类的元素的innerHTML

Question

我们有输入类型单选的选项列表。

如果选择了主收音机，现在我们要获取具有类“option-sku”的元素的内部html。

因此，当页面加载时，它应该检查哪个单选按钮被选中，然后使用类“option-sku”获取最近元素的 innerhtml。

当点击另一个输入单选时，它应该将值替换为所选单选的 innerhtml。

在我当前的 HTML 下面的产品选项 1 被选中。现在我想获得类“option-sku”的innerhtml。所以值应该是“SKU1”。

我想在类"product-option-image" 的范围内显示该值。

选择产品选项 2 的单选按钮时，<span class="product-option-image"> 中的“SKU1”的值应替换为“SKU2”

我们怎样才能做到这一点？

HTML：

<tbody>
    <tr>
        <td class="image" rowspan="8">
            <span class="product-option-image"> <script type="text/javascript">
    document.write(sku)
  </script></span> </span>
        </td>
        <td class="order" colspan="2">Text</td>
    </tr>
    <tr>
        <td>
            <div class="input-box">
                <ul id="options-183-list" class="options-list">
                    <li class="product-option active">
                        <span class="input-radio">
                            <input type="radio" class="radio  validate-one-required-by-name product-custom-option" onclick="opConfig.reloadPrice()" checked="" name="options[183]" id="options_183_2" value="591" price="0">
                        </span>
                        <label for="options_183_2">
                            <span class="option-name">Product option 1</span>
                            <span class="option-sku">SKU1</span>
                            <span class="price-notice default">€0</span>
                        </label>
                    </li>
                    <li class="product-option">
                        <span class="input-radio">
                            <input type="radio" class="radio  validate-one-required-by-name product-custom-option" onclick="opConfig.reloadPrice()" name="options[183]" id="options_182_2" value="590" price="0">
                        </span>
                        <label for="options_183_1">
                            <span class="option-name">Product option 2</span>
                            <span class="option-sku">SKU2</span>
                            <span class="price-notice default">€0</span>
                        </label>
                    </li>
                </ul>
            </div>
        </td>
    </tr>
</tbody>

<script type="text/javascript">
var sku = $(  $("input:checked").prop(".option-sku") ).text()
</script>

Answer 1

试试这个：

$(function(){
  console.log($('input:checked').closest('.product-option').find('.option-sku').html());
})

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

<div class="input-box">
                <ul id="options-183-list" class="options-list">
                    <li class="product-option active">
                        <span class="input-radio">
                            <input type="radio" class="radio  validate-one-required-by-name product-custom-option" onclick="opConfig.reloadPrice()" checked="" name="options[183]" id="options_183_2" value="591" price="0">
                        </span>
                        <label for="options_183_2">
                            <span class="option-name">Product option 1</span>
                            <span class="option-sku">SKU1</span>
                            <span class="price-notice default">€0</span>
                        </label>
                    </li>
                    <li class="product-option">
                        <span class="input-radio">
                            <input type="radio" class="radio  validate-one-required-by-name product-custom-option" onclick="opConfig.reloadPrice()" name="options[183]" id="options_182_2" value="590" price="0">
                        </span>
                        <label for="options_183_1">
                            <span class="option-name">Product option 2</span>
                            <span class="option-sku">SKU2</span>
                            <span class="price-notice default">€0</span>
                        </label>
                    </li>
                </ul>
            </div>

让它动态尝试：

$('input[type="checkbox"]').click(function(){
    $(this).closest('.product-option').find('.option-sku').html());
});

Answer 2

在 JavaScript 中只需使用此代码。

  function reloadPrice(target){ 
    let prnt_span = target.parentElement;
    let prnt_li = prnt_span.parentElement;
    // get the innerHtml
    let option_suk = prnt_li.getElementsByClassName("option-sku")[0];
    console.log(option_suk);
  }

并将OnClick 活动安排到此

 <input type="radio" class="radio  validate-one-required-by-name product-custom-option" onclick="reloadPrice(this)" name="options[183]" id="options_182_2" value="590" price="0">

^_^