Wie erhalte ich ein Attribut aus einem div-Elemente definierte in meinem UIWebView in meinen iOS-App?Get Attribut unter mehrfachen Div-Elementen in meinen iOS-App von UIWebView W/Swift
weiter zu erläutern ...
Ich habe ein sehr einfaches HTML-Dokument, das ich in eine UIWebView laden. Es ermöglicht einem Benutzer zu klicken, um Schaltflächen ein- oder auszuschalten. Ich setze ein Attribut auf den divs auf wahr oder falsch. Siehe meinen Code unten.
<html>
<head>
<title>Tire Selection Template</title>
<style>
.front_truck_box{
display:flex;
flex-wrap: wrap;
border:1px solid black;
height:80px;
flex: 0 1 80px;
padding:10px;
}
.middle_truck_box, .back_truck_box {
display:flex;
flex-wrap: wrap;
border:1px solid black;
height:80px;
flex: 1 1 120px;
max-width:250px;
padding:10px;
}
.wrapper{
display:flex;
flex-direction: row;
flex-wrap: nowrap;
align-items:center;
justify-content: center;
}
.tire_box{
flex: 0 0 10px;
height:30px;
width:10px;
border:1px solid black;
cursor:pointer;
}
.tire_set{
display: flex;
flex: 0 0 35px;
justify-content: space-around;
}
.front_tire_set{
display:flex;
flex: 0 1 100%;
justify-content: space-around;
}
.first_row,.second_row{
display:flex;
flex: 1 0 100%;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: space-around;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="front_truck_box">
<div class="first_row">
<div class="front_tire_set">
<div class="tire_box" tire="1" active="false"></div>
<div class="tire_box" tire="2" active="false"></div>
</div>
</div>
<div class="second_row">
<div class="front_tire_set">
<div class="tire_box" tire="3" active="false"></div>
<div class="tire_box" tire="4" active="false"></div>
</div>
</div>
</div>
<div class="middle_truck_box">
<div class="first_row">
<div class="tire_set">
<div class="tire_box" tire="5" active="false"></div>
<div class="tire_box" tire="6" active="false"></div>
</div>
<div class="tire_set">
<div class="tire_box" tire="7" active="false"></div>
<div class="tire_box" tire="8" active="false"></div>
</div>
</div>
<div class="second_row">
<div class="tire_set">
<div class="tire_box" tire="9" active="false"></div>
<div class="tire_box" tire="10" active="false"></div>
</div>
<div class="tire_set">
<div class="tire_box" tire="11" active="false"></div>
<div class="tire_box" tire="12" active="false"></div>
</div>
</div>
</div>
<div class="back_truck_box">
<div class="first_row">
<div class="tire_set">
<div class="tire_box" tire="13" active="false"></div>
<div class="tire_box" tire="14" active="false"></div>
</div>
<div class="tire_set">
<div class="tire_box" tire="15" active="false"></div>
<div class="tire_box" tire="16" active="false"></div>
</div>
</div>
<div class="second_row">
<div class="tire_set">
<div class="tire_box" tire="17" active="false"></div>
<div class="tire_box" tire="18" active="false"></div>
</div>
<div class="tire_set">
<div class="tire_box" tire="19" active="false"></div>
<div class="tire_box" tire="20" active="false"></div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
$(".wrapper").on('click', '.tire_box', function() {
var tire = $(this).attr("tire");
var active = $(this).attr("active");
console.log(active);
//console.log(tire);
if(active == "false"){
$(this).css("background-color","black");
$(this).attr("active","true");
}else{
$(this).css("background-color","white");
$(this).attr("active","false");
}
});
function test(){
return "test"
}
});
</script>
</body>
</html>
Sie können es in Aktion sehen hier: https://jsfiddle.net/x11joex11/0d92ao80/1/
Ich bin der der folgenden Codezeile in schnellen bewusst.
theWebView.stringByEvaluatingJavaScriptFromString("document.documentElement.outerHTML")
Diese Linie wird alle HTML zurück. Nun könnte ich das vielleicht durchgehen und analysieren, aber ich denke, dass es möglich sein sollte, da ich jquery verwende, um einen Befehl auszuführen, um alle Felder zu erhalten, auf die geklickt wurde. Wenn auf jede Box geklickt wird, ändere ich ihr "aktives" Attribut auf "wahr" oder "falsch". Wie mache ich das?
beispielsweise ein Array mit Werten der "Reifen" -Attribut Rückkehr I auf jedem div (.tire_box) haben, die angeklickt wird ("active = true").
Eine Antwort mit jQuery (da ich es auf meinem HTML haben) oder Javascript ist in Ordnung. Nur nicht sicher, was in der stringByEvaluatingJavascriptFromString() Funktion
Update ::
ich den Wert von ‚Eins‘ bekommen konnte setzt der Reifen mit diesem Befehl.
document.getElementsByClassName('tire_box')[0].getAttribute('tire')
Ich muss in der Lage, die Liste der Reifen ausgewählt bekommen und irgendwie damit in schnellen etwas tun. Nicht sicher beste Weg, dies noch zu tun ...
Was interessant ist, ich scheinen in der Lage zu sein jQuery-Code auszuführen. Ich habe einen Funktionstest() in einer Variablen außerhalb Javascript mit einem alert ('test') in es in meinem html und lief diesen Code ...
Swift Javascript Ich lief
$(document).ready(function(){
test();
});
Hinzu HTML außerhalb document.ready()
var test = function(){
alert("test function ran");
return "test";
};
auf der stringByEvaluatingJavaScriptFromString Funktion und den Alarm genannt, aber ich scheine nicht jedes Ergebnis zu kommen aus dem stringByEvaluatin gJavaScriptFromString Funktion ... einfach leer?
Ich frage mich nur, wie 'die Funktion der Javascript gibt und was habe ich in dem JavaScript-Befehl zu tun, um es etwas zurückgeben zu machen?