Question

有两个产品图片，一个在左侧，一个在右侧。选择颜色时，勾选＆＃39;图标将显示在选择的顶部。问题是，＆＃39; tick＆＃39;图标在被选中后不会成为活动复选框。＆＃39; tick＆＃39;图标会以某种方式只能粘在一个选择器上。目的是打勾＆＃39;图标变为活动选择。请就此事提出建议。

    <style>
        .product-img {
        width: 50%;
        display: block;
        position: relative;
        height:250px;
        }
        .product-img img {
        width: auto;
        height: 100%;
        position: absolute;
        opacity: 0;
        transition: all 0.3s ease;
        }
        .product-img img.active {
        opacity: 1;
        }
        /* Product Configuration */
        .product-color span {
        font-size: 14px;
        font-weight: 400;
        color: #86939E;
        }
        /* Product Color */
        .color-choose div {
        display: inline-block;
        }
        .color-choose input[type="radio"] {
        display: none;
        }
        .color-choose input[type="radio"] + label span {
        display: inline-block;
        width: 25px;
        height: 25px;
        margin: -1px 2px 0 0;
        vertical-align: middle;
        cursor: pointer;
        /* border-radius: 50%; */
        border: 2px solid #FFFFFF;
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33);
        }
        .color-choose input[type="radio"]#red + label span {
        background-color: #C91524;
        }
        .color-choose input[type="radio"]#blue + label span {
        background-color: #314780;
        z-index: 10;
        }
        .color-choose input[type="radio"]#black + label span {
        background-color: #323232;
        }
        .color-choose input[type="radio"]:checked + label span {
        background-image: url(http://lisenme.com/demo/color_change/images/check-icn.svg);
        background-repeat: no-repeat;
        background-position: center;
        }
    </style>
    <style>
        .product-img-a {
        width: 50%;
        display: block;
        position: relative;
        height:250px;
        }
        .product-img-a img {
        width: auto;
        height: 100%;
        position: absolute;
        opacity: 0;
        transition: all 0.3s ease;
        }
        .product-img-a img.active-a {
        opacity: 1;
        }
        /* Product Configuration */
        .product-color-a span {
        font-size: 14px;
        font-weight: 400;
        color: #86939E;
        }
        /* Product Color */
        .color-choose-a div {
        display: inline-block;
        }
        .color-choose-a input[type="radio"] {
        display: none;
        }
        .color-choose-a input[type="radio"] + label span {
        display: inline-block;
        width: 25px;
        height: 25px;
        margin: -1px 2px 0 0;
        vertical-align: middle;
        cursor: pointer;
        /* border-radius: 50%; */
        border: 2px solid #FFFFFF;
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33);
        }
        .color-choose-a input[type="radio"]#reda + label span {
        background-color: #C91524;
        }
        .color-choose-a input[type="radio"]#bluea + label span {
        background-color: #314780;
        z-index: 10;
        }
        .color-choose-a input[type="radio"]#blacka + label span {
        background-color: #323232;
        }
        .color-choose-a input[type="radio"]:checked + label span {
        background-image: url(check-icn-a.svg);
        background-repeat: no-repeat;
        background-position: center;
        }
    </style>


<div style="display: inline-block">
    <div class="product-img">
        <img data-image="black" src="http://lisenme.com/demo/color_change/images/black.png" alt="">
        <img data-image="blue" src="http://lisenme.com/demo/color_change/images/blue.png" alt="">
        <img data-image="red" class="active" src="http://lisenme.com/demo/color_change/images/red.png" alt="">
    </div>
    <!-- Product Color -->
    <div class="product-color">
        <span>Select Color</span>
        <div class="color-choose">
            <div>
                <input data-image="red" type="radio" id="red" name="color" value="red" checked>
                <label for="red"><span></span></label>
            </div>
            <div>
                <input data-image="blue" type="radio" id="blue" name="color" value="blue">
                <label for="blue"><span></span></label>
            </div>
            <div>
                <input data-image="black" type="radio" id="black" name="color" value="black">
                <label for="black"><span></span></label>
            </div>
        </div>
    </div>
</div>



<div style="display: inline-block; margin-left: 200px;">
    <div class="product-img-a">
        <img data-image="blacka" src="http://lisenme.com/demo/color_change/images/black.png" alt="">
        <img data-image="bluea" src="http://lisenme.com/demo/color_change/images/blue.png" alt="">
        <img data-image="reda" class="active-a" src="http://lisenme.com/demo/color_change/images/red.png" alt="">
    </div>
    <!-- Product Color -->
    <div class="product-color-a">
        <span>Select Color</span>
        <div class="color-choose-a">
            <div>
                <input data-image="reda" type="radio" id="reda" name="color" value="reda" checked>
                <label for="reda"><span></span></label>
            </div>
            <div>
                <input data-image="bluea" type="radio" id="bluea" name="color" value="bluea">
                <label for="bluea"><span></span></label>
            </div>
            <div>
                <input data-image="blacka" type="radio" id="blacka" name="color" value="blacka">
                <label for="blacka"><span></span></label>
            </div>
        </div>
    </div>
</div>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript"></script>
    <script>
        $(document).ready(function() {
        $('.color-choose input').on('click', function() {

          var fridge = $(this).attr('data-image');

          $('.active').removeClass('active');
          $('.product-img img[data-image = ' + fridge + ']').addClass('active');
          $(this).addClass('active');

          $checkbox.prop('checked', true);

        });

        });

    </script>
    <script>
        $(document).ready(function() {
        $('.color-choose-a input').on('click', function() {

          var fridgeA = $(this).attr('data-image');

          $('.active-a').removeClass('active-a');
          $('.product-img-a img[data-image = ' + fridgeA + ']').addClass('active-a');
          $(this).addClass('active-a');

          $checkbox.prop('checked', true);

        });

        });

    </script>

codepen

Answer 1

Jquery的：

$checkbox.prop('checked', true);

Vanilla Javascript：

checkbox.checked = true;

选择颜色选项时更改产品图像

1 个答案: