Question

我有以下问题：

    <div class="container">
       <button id="buttonOne">ButtonOne</button>
       <button id="buttonTwo">ButtonTwo</button>
   </div>
   <p id="myParagraph">
     <br>
   </p>

以下脚本：

<script>

var appendedInput = $('#buttonOne').one("click", function(event) {
  var myInput ="<input name=inputOne id="inputOneId"></input>;
  $('#myParagraph').append(myInput);
;})

</script>

编辑

确定。所以我希望按钮2像按钮一样执行，并且在同一段落中添加新元素，在不存在按钮的情况下，或者用按钮两次生成输入更改#myInput。我希望现在更清楚了。现在我甚至在思考为什么我想要这样做...... 所以我的问题是，如何让我的脚本执行这样的功能？如果尚未存在的元素将存在，如何更改该元素而不是向同一段添加新元素。我很抱歉让人困惑，我也觉得我的问题很混乱，这是一个得到答案的地方。

以后编辑的代码 在Jazz的帮助下，我现在正在尝试将.html与.append混合并获得一些看似正在进行的事情。

<script>
  var inputOne ="<input name='inputOne' id='inputOneId'></input>";
  var inputTwo ="<input name='inputTwo' id='inputTwoId'></input>";      

  var appendedInputOne = $('#buttonOne').one("click", function(event) {
      $('#myParagraph').append(inputOne);
;})

 var appendedInputTwo = $('#buttonTwo').one("click, function(event) {
     $('#myParagraph').append(inputTwo);
</script>

现在再次出现以下情况。如果单击按钮一，然后！单击按钮2，我们有2个输入字段，我们总共只查找1个输入字段。如果没有输入字段，则只应附加按钮2。我正确地切换到php并从php解决这个问题。但它仍然是一个很好的Javascript问题大声笑

Answer 1

替换它而不是附加

使用.html（值）

    <script>

    $("#buttonOne").on("click", function(event) {
          var myInput = "<input id='idInput' name='inputMe'></input>";
          $('#myParagraph').html(myInput);
     });

    $("#buttonTwo").on("click", function(event) {
          var myInput = "<input id='idInput' name='inputMe'></input>";
          $('#myParagraph').html(myInput);
     });

    </script>

Answer 2

像这样使用:button Selector

    <script>

var appendedInput = $(':button').on("click", function(event) {
  var myInput = "<input id='idInput' name='inputMe'></input>";
  $('#myParagraph').append(myInput);
;})

</script>

Answer 3

因此，如果我理解正确，你有两个按钮，如果点击第一个按钮，它应该在<p id="myParagraph">内附加一个输入字段，这就像你已经拥有的那样：

$('#buttonOne').one("click", function(event) {
    var myInput = "<input id='idInput' name='inputMe'></input>";
    $('#myParagraph').append(myInput);
});

如果在单击第一个按钮之前单击第二个按钮，它应该具有与第一个单击处理程序相同的功能，因此首先将其重构为一个函数：

function appendInput() {
    var myInput = "<input id='idInput' name='inputMe'></input>";
    $('#myParagraph').append(myInput);
}

$('#buttonOne').one("click", function(event) {
    appendInput();
});

现在我们为第二个按钮添加一个新的点击处理程序，检查输入是否存在并相应地处理案例：

function appendInput() {
    var myInput = "<input id='idInput' name='inputMe'></input>";
    $('#myParagraph').append(myInput);
}

function changeInput() {
    var myInputValue = $('#idInput').val(); // get value of input field
    myInputValue = myInputValue + " <- changed"; // do your value changing here
    $('#idInput').val(myInputValue); // set value back to input field
}

$('#buttonOne').one("click", function(event) {
    if(!$('#idInput').length) { //this evaluates to false if the element exists
        appendInput();
    }
});


$('#buttonTwo').on("click", function(event) {
    if(!$('#idInput').length) { //this evaluates to false if the element exists
        appendInput();
    } else {
        changeInput();
    }
});

我希望如果您没有随时再次提出要求或澄清您的请求，那将对您有所帮助。

function appendInput() {
    var myInput = "<input id='idInput' name='inputMe'></input>";
    $('#myParagraph').append(myInput);
}

function changeInput() {
    var myInputValue = $('#idInput').val(); // get value of input field
    myInputValue = myInputValue + " <- changed"; // do your value changing here
    $('#idInput').val(myInputValue); // set value back to input field
}

$('#buttonOne').one("click", function(event) {
    if(!$('#idInput').length) { //this evaluates to false if the element exists
        appendInput();
    }
});


$('#buttonTwo').on("click", function(event) {
    if(!$('#idInput').length) { //this evaluates to false if the element exists
        appendInput();
    } else {
        changeInput();
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
       <button id="buttonOne">ButtonOne</button>
       <button id="buttonTwo">ButtonTwo</button>
 </div>
 <p id="myParagraph">
     <br>
 </p>

Answer 4

使用普通的Javascript，而不是jQuery解决这个问题，并改变一些html。这就是我在寻找的东西..

<html>
<head>
<script>
  function myFunction() {
    document.getElementById("demo").innerHTML = "edited";
  }
  function mySecondFunction() {
    document.getElementById("demo").innerHTML ="<input></input>";
  }
</script>
</head>

<body>

<h1>JavaScript in Head</h1>

<p id="demo">A Paragraph.</p>

 <button type="button" onclick="myFunction()">Try it</button>
 <button type="buttonOne" onclick="mySecondFunction()">Try Again</button>

</body>
</html>

如何更改以后使用jQuery添加的html元素？

4 个答案: