不透明度上選擇的選項

Question

我有一個切換按鈕，允許用戶選擇1個或2行

因此，當該ID的用戶點擊它會刪除或添加類和表演diferents行，所以我需要添加如何？切換按鈕上的不透明度，我需要顯示實際選定的切換按鈕上的不透明度。

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"); 
});