Huhu Ihr Lieben,
ich bin gerad am verzweifeln.
Ich habe hier folgende HTML 5 - jQuery/Bootstra (CSS/JS) Seite im Bau, die den Forge of Empires Forschungsbaum später einmal darstellen soll:
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>Forge of Empires - Forschungsbaum</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<script type='text/javascript'>
function changeBG(value) {
var val = value;
switch(val){
case "option1":
$("#block-1-1").style.backgroundColor = "yellow";
break;
case "option2":
$("#block-1-1").style.backgroundColor = "green";
break;
default:
break;
}
};
</script>
</head>
<body>
<div>
<div class="col-md-2" style="border: 0px solid">
<h1>Steinzeit</h1>
<div id="block-1">
<div id="block-1-1" class="col-md-12" style="border: 0px solid">
<h4>Stammesgemeinschaft</h4>
<div style="float:left;padding-right: 10px;padding-bottom: 40px"><img alt="Stammesg." src="#"></div>
<div><p>Forge-Punkte: 3<br>Sonstige Kosten: keine<br>Forschung: keine<br>Bonus: keiner</p></div>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="options" id="option1" onclick='changeBG("option1")'> In Forschung
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2" onclick='changeBG("option2")'> Erforscht
</label>
</div>
</div>
</div>
</div>
</div>
<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</body>
</html>Natürlich hab ich alle Forschungen bereits in meiner Version drinn, jedoch reicht der Teil für mein Problem aus.
Wenn die Seite geladen wurde, kann man die Buttons nutzen, um die Forschung auf true/false zu setzen, was dann entweder in einem gelben oder grünen Hintergrund resultieren sollte.
Sobald ich auch nur ansatzweise jQuery und/oder Bootstrap dadurch nutze/anspreche, geht der Spaß nicht.
Lasse ich jQuery/Bootstrap raus, dann funktioniert das ehemalige Script:
function changeBG(value) {
var val = value;
switch(val) {
case "option1":
document.getElementById("block-1-1").style.backgroundColor = "yellow";
break;
case "option2":
document.getElementById("block-1-1").style.backgroundColor = "green";
break;
default:
break;
}
};Verwende ich jedoch auch nur eines der beiden JS-Frameworks und leider braucht Bootstrap-JS das zuvor eingebundene jQuery-Framework, dann kann ich mein Vorhaben vergessen, zudem bleibt dadurch der per <input type="radio" ... erzeugte und durch das Bootstrap-CSS zum Button veränderte Radio-Input nicht mehr aktiv, sprich, der gedrückte "Button" bleibt in diesem Fall nicht mehr gedrückt.
Wie also kann ich dem ganzen jetzt mitteilen, wenn Button XY gedrückt ist, färbe mir gefälligst den Hintergrund von DIV YX anhand des DIV-ID-Attributs BLA? Das kann doch nicht so schwer sein oder?
Ich hab natürlich, wie damals zu WBB3 Zeiten, den noConflict - Mode versucht ... Pustekuchen.
Bleibt mir also nur zu hoffen, dass ich eventuell hier die Lösung bekomme, nach der ich aktuell seit 4h am Suchen bin 
.
Was natürlich nicht schlecht wäre, wäre am Ende noch eine function onLoad(), um beim Laden der Seite alle Forschungen auf rot zu setzen.
Gruß
Chaos234
.
