合併兩個功能切換按鈕

Question

我也執行類似任務的兩個類似的功能，但我不太確定如何最好地將它們合併爲我還是一個初學者...

小提琴顯示了兩個功能：
https://jsfiddle.net/umda6wn6/1/

<div class="content"> 
    <div class="green button"> 
    <b>Button</b> 
    </div> 
    <div class="red button"> 
    <b>Button</b> 
    </div> 
    <div class="green gdiv"> 
    GREENGREENGREENGREEN 
    </div> 
    <div class="green gdiv"> 
    GREENGREENGREENGREEN 
    </div> 
    <div class="red rdiv"> 
    REDREDREDRED 
    </div> 
</div> 

CSS

.button { 
    color: white; 
    background-color: green; 
    width: 10%; 
    display: inline-block; 
    text-align: center; 
    padding: 5px; 
} 

.red { 
    background-color: red; 
} 

.green { 
    background-color: green; 
} 

.button:hover { 
    cursor: pointer; 
} 

.buttonoff { 
    background-color: gray; 
} 

JS

$(document).ready(function() { 
    $(".green").click(function() { 
    $(".gdiv").toggle(); 
    $(".green").toggleClass("buttonoff"); 
    }); 
}); 

$(document).ready(function() { 
    $(".red").click(function() { 
    $(".rdiv").toggle(); 
    $(".red").toggleClass("buttonoff"); 
    }); 
}); 

我猜它看起來有點像這個

$(document).ready(function() { 
    $(".button").click(function() { 
    $(???).toggle(); 
    $(this).toggleClass("buttonoff"); 
    }); 

但我不知道該怎麼把裏面的「???」。由於我要添加更多的按鈕，我想要一種方法來擴展此功能，而無需爲每個新功能添加另一個功能...

Answer 1

如果你想知道哪個按鈕被點擊，你可以看看它的類是這樣的：

$(document).ready(function() { 
    $(".button").click(function() { 
     //get classes of element as array 
     // index 0 would be red or green 
     var classes = $(this).prop('className').split(' '); 
     // get first letter of red/ green 
     var firstletter = classes[0].substr(0, 1); 
     $("." + firstletter + "div").toggle(); 
     $("." + classes[0]).toggleClass("buttonoff"); 
    }); 
}); 

測試在這裏https://jsfiddle.net/8sbe48oa/

Answer 2

您可以創建一個簡單的方法，從click事件中調用該方法。在點擊事件功能中，關鍵字this將引用被點擊的元素。我注意到你正在使用兩個不同的類選擇器引用相同的元素。爲了簡化你可以在下面的例子中設置通過toggleBtn函數傳遞的click事件，它會在你的例子中的同一個元素上調用jQuery.toggle和jQuery.toggleClass。

$(document).ready(function() { 

    function toggleBtn() { 
     var $this = $(this); 
     $this.toggle(); 
     $this.toggleClass("buttonoff"); 
    } 

    $(".gdiv").click(toggleBtn); 
}); 

我希望這有幫助。