javascript - 所选选项的不透明度

Question

我有一个切换按钮允许用户选择 1 或 2 行

所以当用户点击 id 时，它会删除或添加类并显示不同的行，所以我需要在切换按钮上添加一个不透明度，如何？我需要在实际选择的切换按钮上显示一个不透明度。

    jQuery("#one-row").click(function () {
                        $('.product-list').removeClass('-two-columns');
                        $('.product-list').addClass('-one-columns');
                    });
    jQuery("#two-rows").click(function () {
                        $('.product-list').removeClass('-one-columns');
                        $('.product-list').addClass('-two-columns');
                    });

    .toggle-one{
        background-image: url(images/toggle_1.svg);
        width: 30px;
        height: 10px;
        float: right;
        display: inline-block;
        cursor: pointer;
    }
    
    .toggle-two{
        background-image: url(images/toggle_2.svg);
        width: 30px;
        height: 10px;
        float: right;
        display: inline-block;
        cursor: pointer;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toggle-rows" style="top: 118px;
        right: 30px;
        position: absolute;">
            <nav>
                <ul>
                    <li style="display: inline-block;">
                        <div class="toggle-one "  id="onw-row">
                          
                        </div>
                    </li> 
                     - 
                    <li style="display: inline-block;">
                        <div class="toggle-two" id="two-rows">
                          
                        </div>
                    </li>
                </ul>
            </nav>
    </div>

Answer 1

我会说，为类似这样的按钮分别添加两行:

jQuery("#one-row").click(function () {
  $('.product-list').removeClass('-two-columns');
  $('.product-list').addClass('-one-columns');
  $("#one-row").css("opacity", "1");
  $("#two-rows").css("opacity", "0.3");                   
});
jQuery("#two-rows").click(function () {
  $('.product-list').removeClass('-one-columns');
  $('.product-list').addClass('-two-columns');
  $("#one-row").css("opacity", ".0.3");
  $("#two-rows").css("opacity", "1");
});