javascript - 使用所选输入的innerhtml更改项目的类别

Question

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

现在我们要更改类为“product-option-image”的元素的类，以及类为 "option-sku" 的元素的innerhtml如果选择了该选项。

因此，当页面加载类 "product-option-image" 时应替换为类 "option-sku" 的元素的 insidehtml已选择。

当点击其他输入时，它应该将该类替换为所选输入的innerhtml。

在我当前的 HTML 中，选择了下面的产品选项 1。现在我想换类(class)"product-option-image"与类 "option-sku" 的innerhtml 。所以类"product-option-image"应该是"SKU1" .

当选择产品选项2的单选按钮时。"SKU1"的类别应替换为 "SKU2" .

我们怎样才能实现这一目标？

HTML:

<tbody>
    <tr>
        <td class="image" rowspan="8">
            <i class="product-option-image"></i>
        </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>

当前JS:

<script type="text/javascript">
    $(document).ready(function () {
        $('input').click(function () {
            $('input:not(:checked)').closest('.product-option-image').removeClass();
            $('input:checked').closest('.product-option-image').addClass(innerHTML);
        });
        $('input:checked').closest('.product-option-image').addClass(innerHTML);
    });
</script>

Answer 1

我也在你的 html 中做了一些更改。

1-如果您希望一次只选择一个单选按钮，则该组单选按钮的名称属性应相同。

其次，您可以添加一个虚拟类test来选择具有product-option-image类的元素，然后使用其类属性

这是片段

function test(e){
   var skuText = $(e).closest('li').find(".option-sku").text();
   $(".test").attr('class', 'test').addClass(skuText)
    
   
   
}

.product-option-image{
  color : red;
}
.SKU1{
  color: green;
}
.SKU2{
   color: orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<tbody>
    <tr>
        <td class="image" rowspan="8">
            <i class="product-option-image test">Test</i>
        </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="test(this)" checked="" name="options" 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="test(this)" name="options" 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>