所选选项的不透明度

时间:2017-09-13 23:48:29

标签: javascript jquery css

我有一个切换按钮,允许用户选择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>

1 个答案:

答案 0 :(得分: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");
});