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/11/

主要想法是，当点击.letter时，我们希望用点击的字母填充第一个空.inputx。单击.inputx后将其删除。

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

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

Answer 2

检查更新后的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 3

我做了一些更改，现在代码完美无缺

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 4

这是一个工作小提琴：http://jsfiddle.net/RF867/10/

我首先在第二个表单中添加一个id，这样我就可以更轻松地定位它。

然后对验证函数进行一些小改动。通过次要，我的意思是将this.value更改为this.innerHTML。

然后我创建了这两个函数。阅读评论以了解：

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

使用新HTML的JavaScript

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

javascript - 将按钮值传递给另一个按钮

5 个答案: