Ich habe Code, der zwei Reihen von farbigen Eingängen des Typs Bild zeigt. Wenn auf eine der Eingaben geklickt wird, wird sie mit einem Schatten markiert und der Schatten auf der zuvor angeklickten Eingabe wird entfernt. Diese jsfiddle zeigt, dass es als Nicht-Ajax-Code funktioniert.Aktualisierung div bei Verwendung von AJAX
Aber das muss mit Ajax funktionieren. Ich habe eine jsfiddle Setup versucht, dies zu zeigen, aber es funktioniert nicht, so dass ich wahrscheinlich nicht den Ajax-Code richtig eingerichtet haben. Aber der Ajax funktioniert hier lokal. In meinem lokalen Setup ist die angeklickte Eingabe wie vorgesehen schattiert, aber die zuvor angeklickte Eingabe bleibt schattiert.
Ich habe einen Beitrag gefunden, der besagt, dass das div aktualisiert werden muss, also fügte ich Folgendes hinzu, aber das div verschwand einfach.
$("#group_one").load(location.href + "#group_one");
Hier ist der vollständige Code. Kann mir bitte jemand helfen?
<style>
.imgStr {display:inline-block }
.selected{ box-shadow:0px 12px 22px 1px #333;}
div.shadow { border: 0px solid #3DA1D2; padding: 10px; }
div.shadow:hover {
-moz-box-shadow: 0 0 5px rgba(61,161,210,0.5);
-webkit-box-shadow: 0 0 5px rgba(61,161,210,0.5);
box-shadow: 0 0 15px rgba(61,161,210,0.5);
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><img src="outside.img"></div>
<form method="post" action="/echo/html/" ajax="true">
<div class='container' id="group_one">
<div class="imgStr shadow" style="background:red">
<input id="red_1" class="imgInput selected" name="img_front_group" value="red" type="image" src="red.gif">
</div>
<div class="imgStr shadow" style="background:yellow">
<input id="yellow_1" class="imgInput" name="img_front_group" value="yellow" type="image" src="yellow.gif">
</div>
<div class="imgStr shadow" style="background:white">
<input id="white_1" class="imgInput" name="img_front_group" value="white" type="image" src="white.gif">
</div>
</div>
<div class='container' id="group_two">
<div class="imgStr shadow" style="background:red">
<input id="red_2" class="imgInput selected" name="img_front_group" value="red" type="image" src="red.gif">
</div>
<div class="imgStr shadow" style="background:yellow">
<input id="yellow_2" class="imgInput" name="img_front_group" value="yellow" type="image" src="yellow.gif">
</div>
<div class="imgStr shadow" style="background:white">
<input id="white_2" class="imgInput" name="img_front_group" value="white" type="image" src="white.gif">
</div>
<div id="showid"></div>
<script>
var last_selected;
$("input").click(function(){
var current_selected = $(this).closest('.container').find(".selected");
$("#showid").text('previous selected = '+current_selected.attr('id'));
$(this).closest('.container').find(".selected").removeClass('selected');
$(this).addClass("selected");
});
</script
'$ ("# group_one") Last (location.href + "#group_one");' wird _the gesamten Seite_ zurückkehren - Hinzufügen der # am Ende sagt nur einen Browser zu diesem Anker zu bewegen, wenn es ist fertig geladen. Aber da du Ajax verwendest, das nicht zutrifft, versucht es wahrscheinlich, eine ganze HTML-Seite in dein div zu laden, was nicht gültig ist. Sie benötigen eine serverseitige URL, die Ihnen nur den Inhalt des von Ihnen angeforderten div zurückgibt. – ADyson
1. Das Markup ist ungültig (fehlende schließende Tags) 2. Es gibt kein "ajax" im Skript (außer 'ajax =" true "' was absolut nichts tut) 3. Das schließende Script-Tag ist defekt 4. Es gibt no '.load (...)' im Skript – Andreas
Ich bin verwirrt über den Fluss des Codes. In der ersten Datei ändert sich der Schatten mit jedem Klick mit der Onclick-Funktion. Im zweiten Fall wird dasselbe durchgeführt, aber nicht zurückgesetzt. Wenn ich das so belasse und das div mit allen Eingaben neu lade, verliere ich den ausgewählten Gegenstand. Muss ich das irgendwie in der Onclick-Funktion speichern und dann die Reload-Funktion mit diesem Wert aufrufen? Das Div ist innerhalb einer Funktion und sein Inhalt variiert mit den Calling-Optionen, etwa so: – user3052443