如何使用多个按钮切换附加元素并将信息传递给输出 JQuery

Question

我之前问过类似的问题：

回答得很好，但这次我在代码中使用了不同的方法，因此是一个新问题。我正在尝试切换信息并使用三个不同的按钮附加 div。

这是代码https://jsfiddle.net/YulePale/nruew82j/40/

JavaScript

document.getElementById("brazil").addEventListener('click', function(e){
if(e.currentTarget.dataset.triggered) return;
e.currentTarget.dataset.triggered = true;
AppendFunction();

function AppendFunction() {
    var para = document.createElement("p");
    var homeTeam = document.getElementById("brazil").value
    para.innerHTML = 'This is the national team of ' + `${homeTeam}` + ':' 
   <br> <input type="text" value="${homeTeam}" id="myInput"><button 
   onclick="myFunction()">Copy text</button>';

        var element = document.getElementById("gugu");
    element.appendChild(para)
    }
})


document.getElementById("draw").addEventListener('click', function(e){
if(e.currentTarget.dataset.triggered) return;
e.currentTarget.dataset.triggered = true;
AppendFunction();

function AppendFunction() {
    var para = document.createElement("p");
    var homeTeam = document.getElementById("draw").value
    para.innerHTML = 'This two teams have played each other 4 times ' + 
`${homeTeam}` + ':' <br> <input type="text" value="${homeTeam}" id="myInput"> 
<button onclick="myFunction()">Copy text</button>';

        var element = document.getElementById("gugu");
    element.appendChild(para)
    }
})


document.getElementById("russia").addEventListener('click', function(e){
if(e.currentTarget.dataset.triggered) return;
e.currentTarget.dataset.triggered = true;
AppendFunction();

function AppendFunction() {
    var para = document.createElement("p");
    var homeTeam = document.getElementById("russia").value
    para.innerHTML = 'This is the national team of ' + `${homeTeam}` + ':' 
<br> <input type="text" value="${homeTeam}" id="myInput"><button 
onclick="myFunction()">Copy text</button>';

        var element = document.getElementById("gugu");
    element.appendChild(para)
    }
})

PS：我不知道为什么 javascript 代码在 fiddle 中不起作用，但它在我的计算机上却能正常工作。

如果您查看代码，我基本上是在尝试切换 div 与各个团队的信息。如果是巴西，div 带有巴西的信息，如果是俄罗斯，则带有俄罗斯的信息。我当前代码的问题是它继续附加 divs 而不是切换它们。我怎样才能切换它们？像这样：https://jsfiddle.net/YulePale/7jkuoc93/

而不是让它们在我每次单击不同的按钮时都附加另一个 div？ ..................................................... .....................................

PS：编辑和更新：

@Twisty，我从你的 fiddle 中分叉了代码，并尝试在使用多行按钮时实现它。该代码运行良好，但每次单击该行上的按钮时，我都无法为每一行附加一个不同且单独的元素。

我尝试将附加元素作为 class：这是代码：https://jsfiddle.net/YulePale/a9L1nqvm/34/

还尝试将其作为 ID：这是代码：https://jsfiddle.net/YulePale/a9L1nqvm/38/

我怎样才能让每一行附加它自己的单独元素，我还希望用户能够使用复制按钮进行复制，而元素不会消失。我如何才能使元素仅在我单击相应区域之外时才会消失：

<div class="col.buttonCol " id="buttons-div">

当我点击另一行按钮时也会消失？同样在您的回答中，您说您会使用文本框而不是以这种方式附加。我检查了模式，它们都像警报一样出现在浏览器上，你能给我指一个资源，它展示了如何使用像附加元素一样工作的模式而不是充当警报的模式吗？谢谢你。

这是我看到的模态的link：https://getbootstrap.com/docs/4.0/components/modal/

Answer 1

我将你所有的 JavaScript 转换为 jQuery，因为你在 jquery-ui 中发布了这个，我假设你想使用 jQuery。

我经常会先组织我的功能，然后再组织交互动作。

JavaScript

$(function() {
  function myFunction() {
    //Do Stuff
  }

  function AppendFunction(id) {
    var para = $("<p>");
    var home = $("#" + id).val();
    para.append("This is the national team of " + home + ":", $("<br>"), $("<input>", {
      type: "text",
      value: home,
      id: "myInput"
    }), $("<button>").html("Copy Text").click(myFunction));

    $("#gugu").html(para);
  }

  function emptyOnDocumentClick(event) {
    var action = $(".triggered").length;
    $(".triggered").removeClass("triggered");
    return !action;
  }

  $("#brazil, #russia").on('click', function(e) {
    if ($(this).hasClass("triggered")) {
      return;
    }
    $(this).addClass("triggered");
    var myId = $(this).attr("id");
    AppendFunction(myId);
  });

  $(document).on("click", function(e) {
    if (emptyOnDocumentClick(e)) {
      $("#gugu").html("");
    }
  });
});

工作示例：https://jsfiddle.net/Twisty/nruew82j/91/

这里的基本概念是对话框，如果是我，我会使用 BootStrap 或 jQuery UI 中的对话框。你没有这样做，所以我们创建内容并将其附加到特定的 <div>。然后，就像在您之前的问题中一样，您只需检测到对文档的点击并决定将要执行的操作。在这种情况下，我清空了我们之前附加内容的 <div> 的内容。

希望对您有所帮助。

如何使用多个按钮切换附加元素并将信息传递给输出 JQuery

how to toggle appended elements using multiple buttons and pass info to the output JQuery

html

jquery-ui

button

toggle