Sono solo un principiante in JavaScript e ho problemi con il tipo di funzione che dovrei usare.
Questo è quello che voglio fare, se faccio clic su qualsiasi pulsantenelle scelte, il valore del pulsante che scelgo verrà trasferito al pulsante che non ha valore in esso e posso anche eliminare il valore che scelgo nel pulsante nero. È come giocare a 4pics 1word.
Ecco il campione: jsfiddle
<form>
<button class="inputx" id="input1" maxlength="1">E</button>
<button class="inputx" id ="input2" maxlength="1">X</button>
<button class="inputx" id ="input3" maxlength="1"></button>
<button class="inputx" id = "input4" maxlength="1"></button>
<button class="inputx" id = "input5" maxlength="1"></button>
<button class="inputx" id = "input6" maxlength="1"></button>
<button class="inputx" id = "input7" maxlength="1"></button>
<button id="get">Check</button>
</form>
<form>
<h3>Choices</h3>
<button value ="X" maxlength="1">X</button>
<button value ="E" maxlength="1">E</button>
<button value ="M" maxlength="1">M</button>
<button value ="A" maxlength="1">A</button>
<button value ="P" maxlength="1">P</button>
<button value ="E" maxlength="1">E</button>
<button value ="L" maxlength="1">L</button>
</form>
risposte:
1 per risposta № 1Ecco un violino funzionante: http://jsfiddle.net/RF867/10/
Ho prima aggiunto un ID al secondo modulo in modo da poterlo targetizzare più facilmente.
Quindi alcune piccole modifiche al file convalida funzione. Per minore, intendo cambiare il file this.value a this.innerHTML.
Quindi ho creato queste 2 funzioni. Leggi il commento per capire:
$("#letters button").click(function(e){ // The new id, target buttons
e.preventDefault(); //Prevent page reload
if($(".inputx:empty:first").text($(this).val()).length) //Change the text of the first empty button. Then check if it changed something
$(this).hide(); //If it changed something, hide the button
})
$(".inputx").click(function(e){ //To remove character on click
e.preventDefault();
if($(this).is(":not(:empty)")){ //If there is text in the button
var letter = $(this).text(); //Get the letter
$("#letters button:not(:visible)").filter(function(){ //Select only visible buttons
return this.value == letter; //Check if the value is the same as the letter
}).first().show(); //There is multiple instance of the same letter (like e), select the first and show
$(this).empty(); //Remove the value of the button
}
}).not(":empty").each(function(){ //select button that has text by default
var letter = $(this).text();
$("#letters button:visible").filter(function(){
return this.value == letter;
}).first().hide(); //Hide default button
})
2 per risposta № 2
Ho aggiornato il violino con un esempio funzionante.
L'idea principale è che quando un file .letter viene cliccato vogliamo riempire il primo vuoto .inputx con la lettera cliccata. E rimuoverlo una volta che il file .inputx è cliccato
$(".letter").click(function(){
$(".inputx:empty").first().html($(this).html());
return false;
});
$(".inputx").click(function(){
$(this).empty();
return false;
});
1 per risposta № 3
Controlla l'aggiornamento violino. Ho aggiunto la seguente funzione per cliccare sui testi. Ho apportato alcune modifiche ai pulsanti per far funzionare il violino senza richiesta di post.
$(".temp").on("click",function(e){
var filled = false;
e.preventDefault();
var s = $(this).text();
$(".inputx").each(function(){
if(!filled)
{
if($(this).text() == "")
{
$(this).text(s);
filled = true;
}
}
});
});
La variabile filled è booleano e viene utilizzato per riempire solo la prima casella di testo vuota. Spero che questo ti aiuti.
1 per risposta № 4
ho apportato alcune modifiche e ora il codice funziona perfettamente
HTML:
<div>
<button class="inputx" id="input1" maxlength="1">E</button>
<button class="inputx" id ="input2" maxlength="1">X</button>
<button class="inputx" id ="input3" maxlength="1"></button>
<button class="inputx" id = "input4" maxlength="1"></button>
<button class="inputx" id = "input5" maxlength="1"></button>
<button class="inputx" id = "input6" maxlength="1"></button>
<button class="inputx" id = "input7" maxlength="1"></button>
<button id="get">Check</button>
<button id="clean">Clean</button>
</div>
<div class="btnsChoices">
<h3>Choices</h3>
<button value ="X" maxlength="1">X</button>
<button value ="E" maxlength="1">E</button>
<button value ="M" maxlength="1">M</button>
<button value ="A" maxlength="1">A</button>
<button value ="P" maxlength="1">P</button>
<button value ="E" maxlength="1">E</button>
<button value ="L" maxlength="1">L</button>
</div>
JS:
$("#get").on("click", function(e){
e.preventDefault();
var a="";
$(".inputx").each(function(){
a += $(this).text();
});
if (a.toUpperCase() === "EXAMPLE") {
alert("success");
}
else{
alert("wrong");
}
});
$("#clean").on("click",function(){
$(".inputx").text("");
});
$(".btnsChoices button").on("click", function(){
var newValue = $(this).val();
$(".inputx").each(function(){
if($(this).text() == ""){
$(this).text(newValue);
return false;
}
});
});
e aggiorno il tuo jsfiddle: http://jsfiddle.net/RF867/12/
1 per risposta № 5
Vedere http://jsfiddle.net/RF867/15/
Il controllo è stato rimosso per ora, ma spero che trovi quanto segue un po 'più pulito con cui lavorare:
<div id="scratchpad">
<button></button>
<button></button>
<button></button>
<button></button>
<button></button>
<button></button>
<button></button>
</div>
<button id="get">Check</button>
<div id="choices">
<h3>Choices</h3>
<button value="X">X</button>
<button value="E">E</button>
<button value="M">M</button>
<button value="A">A</button>
<button value="P">P</button>
<button value="E">E</button>
<button value="L">L</button>
</div>
JavaScript da abbinare al nuovo HTML
$("#scratchpad button").click(function(e) {
var letter = $(this).text();
if (letter === "") {
// do nothing
} else {
//re-enable choice
$("#choices button[value=" + letter + "]:empty:first").text(letter);
//clear button
$(this).text("");
}
});
$("#choices button").click(function(e){
var letter = $(this).text();
if (letter === "") {
// do nothing
} else {
// place choice
$("#scratchpad button:empty:first").text(letter);
// empty button letter
$(this).text("");
}
});