如何更改后来使用jQuery添加的HTML元素

我有以下问题：

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

编辑

好的。因此，我希望按钮两个像一个按钮一样执行，然后在同一段落中附加一个新元素，在情况下不存在按钮的情况下，或使用按钮两个生成的输入更改#MyInput。我希望现在更清楚。现在我什至在思考为什么我想这样做...所以我的问题是，如何获得脚本来执行这样的功能？如果将存在尚未存在的元素，我该如何更改该元素而不是在同一段落中添加新元素。对不起，它使人们感到困惑，我也发现我的问题很困惑，这是一个获得答案的地方。

后来编辑的代码在爵士乐的帮助下，我现在正在尝试将.html与.html混合。

<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个输入字段，我们总共只寻找1个输入字段。按钮两个只能在没有输入字段的情况下附加。我正是要切换到PHP并从PHP解决此问题。但这仍然是一个很棒的JavaScript问题，哈哈

替换它而不是附加

使用.html（value）

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

使用普通的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>

使用这样的使用：按钮选择器

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

因此，如果我正确理解您，您有2个按钮，如果单击第一个按钮，则应附加<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>

相关内容

最新更新

热门标签：