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

我以前也问过类似的问题：

答案很好，但这次我在代码中使用了不同的方法，因此提出了一个新问题。 我试图切换信息和附加一个div使用三个不同的按钮

这是密码

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

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

document.getElementById（“巴西”）.addEventListener（'click'，函数（e）{
if（e.currentTarget.dataset.triggered）返回；
e、 currentTarget.dataset.triggered=true；
AppendFunction（）；
函数AppendFunction（）{
var para=document.createElement（“p”）；
var homeTeam=document.getElementById（“巴西”）.value
para.innerHTML='这是'+'${homeTeam}'+'的国家队：'

复制文本'；
var元素=document.getElementById（“gugu”）；
元素.附加子元素（第6段）
}
})
document.getElementById（“draw”）.addEventListener（'click'，函数（e）{
if（e.currentTarget.dataset.triggered）返回；
e、 currentTarget.dataset.triggered=true；
AppendFunction（）；
函数AppendFunction（）{
var para=document.createElement（“p”）；
var homeTeam=document.getElementById（“draw”）.value
para.innerHTML='这两支球队已经相互比赛了4次'+
`${homeTeam}`+'：'

复制文本'；
var元素=document.getElementById（“gugu”）；
元素.附加子元素（第6段）
}
})
document.getElementById（“俄罗斯”）.addEventListener（'click'，函数（e）{
if（e.currentTarget.dataset.triggered）返回；
e、 currentTarget.dataset.triggered=true；
AppendFunction（）；
函数AppendFunction（）{
var para=document.createElement（“p”）；
var homeTeam=document.getElementById（“俄罗斯”）.value
para.innerHTML='这是'+'${homeTeam}'+'的国家队：'

复制文本'；
var元素=document.getElementById（“gugu”）；
元素.附加子元素（第6段）
}
})

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

如果你看一下代码，我基本上是想用不同团队的信息切换一个div。如果是巴西，div会提供关于巴西的信息，如果是俄罗斯，则会提供关于俄罗斯的信息。 我当前代码的问题是它一直在附加div，而不是 切换它们。如何切换它们？像这样：

而不是让他们在每次我点击不同的按钮时附加另一个div？ 徖

PS:编辑和更新：

@Twisty，我从您的小提琴中分叉了代码，并尝试在使用多行按钮时实现它。代码运行得很好，但每次单击该行上的按钮时，我都无法为每行添加不同的单独元素

我尝试将附加元素作为类： 代码如下：

还尝试将其作为id： 代码如下：

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

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

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

---

下面是我看到的modals的链接：

我将所有JavaScript转换为jQuery，因为您在

jQuery ui中发布了这篇文章，我假设您想使用jQuery

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

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

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

$（函数（）{
函数myFunction（）{
//做事
}
函数追加函数（id）{
var para=$（“”）；
var home=$（“#”+id）.val（）；
附加段落（“这是由“+home+”：“，$（“
”），$（”）组成的国家队{
键入：“文本”，
价值观：家，
id:“我的输入”
})，$（“”）。html（“复制文本”）。单击（myFunction））；
$（#gugu”）.html（第2段）；
}
函数清空文档单击（事件）{
var action=$（“.triggered”）.length；
$（“.triggered”）.removeClass（“triggered”）；
返回！行动；
}
$（“#巴西，#俄罗斯”）。在（'click'，函数（e）{
if（$（this）.hasClass（“已触发”））{
回来
}
$（此）.addClass（“已触发”）；
var myId=$（this.attr（“id”）；
附件功能（myId）；
});
$（文档）。在（“单击”）上，函数（e）{
如果（单击（e））{
$（“#gugu”）.html（“”）；
}
});
});

工作示例：

这里的基本概念是一个对话框，如果是我，我会使用一个来自引导或jqueryui的对话框。您没有这样做，所以我们创建内容并将其附加到特定的
。然后，就像在上一个问题中一样，您只需检测到对文档的单击，并决定该操作将做什么。在本例中，我清空了先前添加内容的
的内容

希望这能有所帮助。
您的代码无法正常工作的原因有很多。首先看一下JSFIDLE中的第9行。同时将CSS移到参考资料中。@Twisty我刚刚更新了问题，请检查一下。谢谢