javascript - 將按鈕值傳遞給另一個按鈕

Question

我只是JavaScript的初學者，我遇到了麻煩，我應該使用什麼樣的函數。

這就是我想要做的，如果我點擊選項中的任何按鈕，我選擇的按鈕的值將被轉移到沒有任何值的按鈕，我也可以刪除我選擇的值在黑色的按鈕。這就像玩4pics 1word。

下面是示例：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> 

Answer 1

這裏有一個工作小提琴：http://jsfiddle.net/RF867/10/

我有第一個添加一個id到第二個表單，所以我可以更容易地定位它。

然後對驗證函數進行一些小改動。通過次要的，我的意思是改變this.value爲this.innerHTML。

然後我創建了這2個函數。閱讀評論就明白了：

$('#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 
}) 

Answer 2

我已經更新了工作示例的小提琴。

http://jsfiddle.net/RF867/11/

的主要思想是，當單擊.letter當我們想與點擊字母，以填補第一個空.inputx。一旦.inputx被點擊，將其刪除。

$('.letter').click(function(){ 
    $('.inputx:empty').first().html($(this).html()); 
    return false; 
}); 

$('.inputx').click(function(){ 
    $(this).empty(); 
    return false; 
}); 

Answer 3

檢查更新的fiddle。我添加了以下功能來點擊文本。我對按鈕做了一些改變，使小提琴無需發佈請求。

$('.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; 
      } 
     } 
    }); 
}); 

可變filled是布爾和被用於填充第一隻空文本框。希望這可以幫助你。

Answer 4

我已經做了一些改變，現在的代碼工作完美

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; 
     } 
    }); 
}); 

，我更新的jsfiddle：http://jsfiddle.net/RF867/12/

Answer 5

見http://jsfiddle.net/RF867/15/

的支票，現在被刪除，但我希望你找到以下一點清潔劑一起工作：

<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來去新的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(''); 
    } 
});