在 JS 中连接单击的按钮值和功能

Question

我是 JS 的初学者。

我有两个功能。怎么做：

1. 如果我单击第一个按钮，使第一个功能工作，如果我单击第二个按钮，使第二个功能工作？
2. 将按下的按钮值应用于函数，然后将其应用于输入字段。

示例：当我使用 Caesar Cipher 键入 'ABC' 时，它会返回 'NOP'，当我使用我的密码（或任何其他密码）键入 'ABC' 时，它将返回 'BCD' （或任何其他值，它取决于选择的密码）。提前谢谢大家

我的 Js 和 Html 代码如下：

<div class="container">
  <div class="row">
    <form  class="col s12 m12 l12">
    <h2>JS Encription</h2>
      <div class="row">
        <div class="input-field col s5 m5 l5">
          <input id="field1" placeholder="Type you text here" id="first_name" type="text" class="validate">
          <label for="first_name">Input</label>
        </div>
        <div class="input-field col s5 m5 l5">
          <input id="field2" disabled placeholder="Result is shown here" id="first_name" type="text" class="validate">
          <label for="first_name">Output</label>
        </div>
      </div>
    </form>

  </div>
      <div class="row switchBtns">
        <div class="col s12 m12 l12">
            <div id="caesarButton" class="col s3 m3 l3 ">
                <a class="waves-effect waves-light btn-small">Caesar Cipher</a>
            </div>
            <div id="mineButton" class="col s3 m3 l3 ">
                <a class="waves-effect waves-light btn-small">My Cipher</a>
            </div>
            <div class="col s3 m3 l3 ">
                <a class="waves-effect waves-light btn-small">3rd Variant</a>
            </div>
            <div class="col s3 m3 l3 ">
                <a class="waves-effect waves-light btn-small">4th Variant</a>
            </div>
        </div>
    </div>
</div>

和JS代码

 // CAESAR
        $("#caesarButton").click(function() {
            var clicked = $(this).val();
            $('#field1').val(encryp(clicked)).val();
        });

        $('#field1').on('keyup keypress blur', function () {  
            var textvalue = $(this).val();
            $('#field2').val(encryp(textvalue)).val();  
        });


        function encryp(tekst) {
            var result = "";
            var str = tekst.toUpperCase();


            for (var i=0; i<str.length ; i++) {
                var ascii = str[i].charCodeAt();

                if(ascii>=65 && ascii<=77) {
                    result+=String.fromCharCode(ascii+13);
                }
                else if(ascii>=78 && ascii<=90) {
                    result+=String.fromCharCode(ascii-13);
                }
                else {
                    result+=" ";
                }
            }
            return result ;
        }

        //MINE
        $("#mineButton").click(function() {
            var clicked = $(this).val();
            $('#field1').val(encryp(clicked)).val();
        });

        $('#field1').on('keyup keypress blur', function () {  
            var textvalue = $(this).val();
            $('#field2').val(encryp(textvalue)).val();  
        });


        function encryp(tekst) {
            var result = "";
            var str = tekst.toUpperCase();


            for (var i=0; i<str.length ; i++) {
                var ascii = str[i].charCodeAt();

                if(ascii>=65 && ascii<=77) {
                    result+=String.fromCharCode(ascii+3);
                }
                else if(ascii>=78 && ascii<=90) {
                    result+=String.fromCharCode(ascii-3);
                }
                else {
                    result+=" ";
                }
            }
            return result ;
        }

Answer 1

我为你准备了一个上下文切换输入处理函数的简化示例，你去吧：

// use an object as a key-value store for your functions
var funcs = {
  caesar: encryp1, // i dont know if i got these the right way around :D
  mine: encryp2
}
// store which funciton is currently selected in a variable
var selected = "caesar"

// call this function just to show the default selected function
determineOutput()

// CAESAR
$("#caesarButton").click(function() {
  console.log("caesar button clicked!")
  // here assign which function to use
  selected = "caesar"
  determineOutput()
});

//MINE
$("#mineButton").click(function() {
  console.log("mine button clicked!")
  // here assign which function to use
  selected = "mine"
  determineOutput()
});

$('#field1').on('keyup keypress blur', function () {  
  // this function is alled every time one of the events 
  // listed happens on the #field1 element
  determineOutput()
});

function determineOutput(){
  var textvalue = $('#field1').val();
  //use the function currently selected by addressing it with 
  // [] on the funcs object
  var correctFunction = funcs[selected]
  // then call the selected function with the input text
  $('#field2').val(correctFunction(textvalue));  
  // show the user which cipher we're using
  $("#currentCipher").html("current cipher:" + selected)
}


function encryp1(tekst) {
  var result = "";
  var str = tekst.toUpperCase();


  for (var i=0; i<str.length ; i++) {
    var ascii = str[i].charCodeAt();

    if(ascii>=65 && ascii<=77) {
      result+=String.fromCharCode(ascii+13);
    }
    else if(ascii>=78 && ascii<=90) {
      result+=String.fromCharCode(ascii-13);
    }
    else {
      result+=" ";
    }
  }
  return result ;
}

function encryp2(tekst) {
  var result = "";
  var str = tekst.toUpperCase();


  for (var i=0; i<str.length ; i++) {
    var ascii = str[i].charCodeAt();

    if(ascii>=65 && ascii<=77) {
      result+=String.fromCharCode(ascii+3);
    }
    else if(ascii>=78 && ascii<=90) {
      result+=String.fromCharCode(ascii-3);
    }
    else {
      result+=" ";
    }
  }
  return result ;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input id="field1" placeholder="Type you text here" type="text">
  <label for="field1">Input</label>
</div>

<div>
  <input id="field2" disabled placeholder="Result is shown here" type="text" class="validate">
  <label for="field2">Output</label>
</div>

<p id="currentCipher"></p>

<button id="caesarButton">
  Caesar Cipher
</button>

<button id="mineButton">
  My Cipher
</button>