J'ai un bouton Ajouter et Supprimer qui sélectionne la DIV complète et ajoute une couleur verte à la DIV. La fonction ne fonctionne que sur le bouton "Ajoutez ce supplément" et "Supprimer". Comment puis-je le faire fonctionner comme cliquer n'importe où sur la div au lieu du bouton particulier lui-même?
Je voudrais entendre quelqu'un de vous aider à vous aider. P>
Cordialement, Bilal p>
p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Fuel Replacement -->
<div class="card-border ho-border">
<h4 class="float-left">Fuel replacement</h4>
<div class="upsell-pricing">£49/trip</div>
<div class="clearfix"></div>
<div class="upsell-text">Save time and return the vehicle at any fuel level. The price include upto a full tank of petrol/gas.</div>
<div class="mt-3 float-right">
<button class="btn btn-add-item">Add this extra</button>
<button class="btn btn-rmv-item">Remove</button>
</div>
<div class="clearfix"></div>
</div>3 Réponses :
Changer à Si vous souhaitez une fonctionnalité à bascule, ajoutez également une variable qui contient l'état CRT:
Est-il possible que vous puissiez ajouter l'aperçu, s'il vous plaît?
Um, non, je pense que Stackoverflow se transforme en un outil de rédaction de code, lol. Selon les règles du site, vous êtes effectivement censé mener vos propres efforts, et non pour nous écrire vos projets.
Merci pour votre aide :) Je vais mettre mon effort.
Si je comprenais que vous avez interrogé à droite, c'est la réponse que vous recherchez.
p>
<!DOCTYPE html>
<html>
<body>
<p id="demo" onclick="myFunction()" style="width:200px; height:100px; border: 1px solid black;">
This Div's background color will change.
</p>
<script>
var color=0;
function myFunction() {
// Just Specify The Id you need
var myDiv = document.getElementById("demo");
if(color == 0)
{
myDiv.style.backgroundColor = "red"; color=1;
}
else
{
myDiv.style.backgroundColor = "white"; color=0;
}
}
</script>
</body>
</html>Je voulais donc le clic sur la div, pas sur le texte. Des pistes?
Voir le contenu du texte est à l'intérieur de la DIV. Il n'est pas nécessaire de ne pas être un contenu texte que vous pouvez lui donner un contenu à l'intérieur de la DIV et que ce code va toujours fonctionner correctement. et l'événement ONCLICK du travail DIV indépendamment du contenu à l'intérieur de la DIV si c'est une image de n'importe quoi
Le contenu du texte est juste pour l'exemple but. @Billnathan. Si vous souhaitez modifier la couleur en cliquant sur le même div, spécifiez simplement l'ID de ce divisé au lieu de «démo» dans la fonction GetElementyID dans le script
Vous pouvez avoir le gestionnaire de clic directement sur la div (je suppose qu'il est et vous n'avez besoin que d'un bouton que vous bascule les classes et changez le texte. . P> J'ai ajouté un Regardez les commentaires du code ci-dessous. Il p> .card-bordure code> ici). .Card-bg code> règle CSS qui semblait manquer dans la question ...
J'ai également ajouté type = "bouton" code> pour empêcher la soumission de formulaire si le bouton est cliqué sur. P> showhidecontinuerbtn () code> fonction. P>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Fuel Replacement -->
<div class="card-border ho-border">
<h4 class="float-left">Fuel replacement</h4>
<div class="upsell-pricing">£49/trip</div>
<div class="clearfix"></div>
<div class="upsell-text">Save time and return the vehicle at any fuel level. The price include upto a full tank of petrol/gas.</div>
<div class="mt-3 float-right">
<button type="button" class="btn btn-add-item">Add this extra</button>
<!--button class="btn btn-rmv-item">Remove</button-->
</div>
<div class="clearfix"></div>
</div>
Je peux voir que vous avez commenté le code Supprimer le code et essayé de charger via JS. J'ai copié le même code. Ça fonctionne bien. Mais en cliquant sur "Ajoutez ce supplément" et le bouton Supprimer n'apparaît pas, et il apparaît plutôt que ceci: prntscr.com/ mwdy07
Quelque chose d'autre dans votre code ou CSS peut le cacher. Appuyez sur [F12] et inspectez le balisage ... Voir si le bouton est là ... puis vérifiez le CSS pour cela.
Hey! Avez-vous supprimé le $ ('. BTN-Add-item'). Sur ('Cliquez sur ", fonction (E) { et $ (". BTN-RMV-Item'). sur ('Cliquez sur ", fonction (E) { gestionnaires? Ma réponse remplace Les deux et la fonction windhidecontinuebtn () { (!)
Hey! C'était Force-masquer CSS qui affiche l'affichage: Aucun. J'ai supprimé la force de force, la force-bloc de CSS et JS aussi. Et ça marche, merci :)
Ha! Ces deux règles du CSS n'étaient pas postées ... c'est pourquoi cela n'a pas eu d'incidence sur l'extrait. ;) J'ai aussi édité.
Assurez-vous de remarquer l'ajout de type = "bouton" sur le balisage du bouton;) c'est-à-dire parce que le type par défaut d'un bouton est Soumettre .
J'ai! Acclamations. Merci pour ton aide :)