Merging zwei Funktionen für einen Umschaltknopf

Question

ich zwei ähnliche Funktionen haben eine ähnliche Funktion ausübt, aber ich bin nicht ganz sicher, wie sie am besten fusionieren, wie ich noch ein Anfänger bin ...

Geige zeigt die beiden Funktionen:
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"); 
    }); 
}); 

ich denke, es gefällt dieses

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

etwas aussehen würde Aber ich weiß nicht, was in setzen ‚???‘. Da ich weitere Schaltflächen hinzufügen möchte, möchte ich diese erweitern, ohne für jedes neue eine weitere Funktion hinzufügen zu müssen.

Answer 1

Wenn Sie wissen möchten, welche Schaltfläche geklickt wurde, können Sie die Klassen auf diese Weise überprüfen:

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

Testen Sie hier https://jsfiddle.net/8sbe48oa/

Answer 2

Sie können eine einfache Methode erstellen, die vom click-Ereignis aufgerufen wird. Innerhalb der Click-Event-Funktion verweist das Schlüsselwort this auf das Element, auf das geklickt wurde. Ich habe bemerkt, dass Sie dasselbe Element mit zwei verschiedenen Klassenselektoren referenzieren. Um es zu vereinfachen, können Sie das Click-Ereignis in der toggleBtn-Funktion aus dem folgenden Beispiel setzen und jQuery.toggle und jQuery.toggleClass auf demselben Element aufrufen wie zuvor in Ihrem Beispiel.

$(document).ready(function() { 

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

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

Ich hoffe, das ist hilfreich.