Question

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

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

因此，在页面加载时，应将"product-option-image"类替换为所选"option-sku"类的元素的innerhtml。

在单击其他输入时，它应使用所选输入的innerhtml替换该类。

在我当前的HTML中，选择了产品选项1。现在，我想用类"product-option-image"的innerhtml来更改类"option-sku"。因此"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>

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

1 个答案: