Question

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

现在，如果选择了主广播，则我们希望获得具有“ option-sku”类的元素的innerhtml。

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

当点击其他输入单选按钮时，应将其替换为所选输入单选按钮的内部html。

在我当前的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

尝试一下：

<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());
});

要使其具有动态性，请尝试：

{{1}}

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">

^ _ ^

单选时获取带有类的元素的innerHTML

2 个答案: