Wie man eine Taste von einer anderen Taste aus aktiviert

Question

Meine Frage unterscheidet sich ein wenig von anderen Fragen, die ich vor allem wollte, aber ich möchte das (aber nicht nur) aktivieren. Hier ist mein syntx:

$("#second_btn").click(function(){ 
 
     $('#first_btn').addClass('active'); 
 
    })

#first_btn{ 
 
     background-color: green; 
 
    } 
 
    #first_btn:active{ 
 
     background-color: yellow; 
 
    } 
 
    
 
    #first_btn.active{ 
 
    background-color: yellow; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="first_btn"> 
 
    first_btn 
 
    </button> 
 
    <button id="second_btn"> 
 
    second_btn 
 
    </button>

Im Grunde, was ich suche ist, wenn die zweite Schaltfläche geklickt wird ich die erste Taste ausgelöst werden soll, und die Farbe der Schaltfläche (ersten) sollte auch geändert in Gelb, als ob auf die Schaltfläche 1 geklickt wurde.

Hier ist eine jsFiddle Version davon: click here

Können Sie mir helfen, zu identifizieren, was mir fehlt?

Answer 1

was Sie brauchen, ist eine Simulation der Schaltfläche Klick-Aktion: die zweite Schaltfläche verhält sich ähnlich wie die erste.

$("#first_btn").mousedown(function(){ 
    $("#second_btn").addClass("active"); 
    }); 
    $("#first_btn").mouseup(function(){ 
    $("#second_btn").removeClass("active"); 
    }); 

Sie können Ereignis hinzufügen Verkettungs nach dem Hinzufügen/Entfernen von Klasse, wenn Sie eine echte „klicken Sie auf“ Aktion auf den zweiten Knopf

Answer 2

Sie die Klasse auf das falsche Element zu ändern, ändern $('#btn')-$('#first_btn'):

$("#second_btn").click(function(){ 
    $('#first_btn').addClass('active'); 
}); 

Außerdem müssen Sie allgemeinere Klasse verwenden, wie folgt aus:

.active { 
    background-color: yellow; 
} 

Answer 3

$('#btn').addClass('active'); 

Sie habe da einige Fehler: - zuerst #btn löst sich in nichts auf (das ist keine ID in deinem DOM) - du fügst eine Klasse 'aktiv' hinzu also müsstest du diese Klasse in deinen CSSs anstreben. Hinweis änderte ich die ':' (Pseudoelement) für eine (Klasse Selektor)

#first_btn.active{ 
    background-color: yellow; 
} 

es einige Versuche geben und kommen hier, wenn Sie mehr Schwierigkeiten begegnen;)

EDITED '':

Dies kann nicht der beste Ansatz sein, aber es kann helfen, erreichen, was Sie wollen:

$("#second_btn").click(function(){ 
    $('#first_btn').toggleClass('active'); 
    window.setTimeout(function(){ 
    $('#first_btn').toggleClass('active'); 
    }, 100); 
}) 

Was mache ich hier eine ‚aktive‘ Klasse setzt (Malerei auf die Schaltfläche gelb) und nach einer Zeitdauer von 0,1 s econds schaltet diese Klasse wieder um (Wiederherstellung der ursprünglichen Tastenfarbe).

Was denkst du?

Answer 4

$("#second_btn").click(function(){ 
    $('#first_btn').click(); 
    $('#first_btn').addClass('active'); 
}) 
#first_btn.active{ 
background-color:yellow; 
} 

Dies wird ein Ereignis auslösen klicken Sie auf die erste Schaltfläche und ändern Sie auch die Farbe in gelb.

definieren dann einen Handler erste Schaltfläche klicken zu handhaben das Ereignis

In der Geige Version zu handhaben u vorgesehen u die aktive Klasse zuweisen falsch ID.Also Trigger ein Click-Ereignis für die erste Schaltfläche hinzufügen.

Answer 5

Sie sollten Stile geben für eine Klasse, so:

#first_btn.active{ // not :active 
    background-color: yellow; 
} 

Und wenn Sie auf einer ersten Schaltfläche klicken, um simulieren möchten, sollten Sie smth hinzufügen.dass wie:

$('#first_btn').click(); 

Answer 6

Ich nehme an, Sie nicht bemerkt haben, aber in dem jsFiddle Code der jQuery Selektor für die erste Schaltfläche ist falsch, aber in Ihrer Frage hier ist in Ordnung, so werde ich ignorieren.

Das Problem ist, dass Sie eine CSS-Klasse hinzufügen, aber in Ihrem CSS haben Sie Stile für die :activeZustand des Knopfes erklärt, keine Klasse, können Sie diese Erklärung halten und die .active Klasse so Ihre CSS-Code hinzufügen wird wie folgt aussehen:

#first_btn:active, 
#first_btn.active { 
    background-color: yellow; 
} 

diese Klasse Hinzufügen statt ersetzen des Zustand (:active) Sie beide Szenarien abdecken werden, wenn direkt die first_btn klicken und wenn das second_btn klicken.