HTML5:将两个边框文本放在另一个边框内，单击按钮

Question

我有一个边界的文本 映像，该文本 图像单击一个按钮(button1(。现在，我单击另一个按钮(button2(，然后生成另一个边框文本 图像。但是这次(按下按钮2时(，我想将两个边框文本 图像组合放在另一个边框内。我怎么做？我的代码当前看起来像

.borderexample{
  border-style:solid;
  border-color:#287EC7;
}
p {
    display: inline-block;
    border-right: 1px dotted black;
}
img {
    vertical-align: middle;
    max-width: 20%;
}
p:after {
    margin-right: 1em;
    content: "";
}
img:before {
    margin-left: 1em;
    content: "";
}

html：

    <section class="borderexample" id="data_zone">
    </section> 
    <section class="borderexample" id="data_zone2">
    </section>
    <script>
    document.getElementById("data_zone2").style.display="none";
    $('#button1').click(function () {
              var color = document.getElementById("txtNameDist").value;
              document.querySelector('#data_zone').innerHTML = '<p><strong>' + color + '</strong></p>' + '<img id="imgABC" src="imgABC.png" />';
            })
            $('#button2').click(function () {
              var color = document.getElementById("txtNameDist").value;
              document.getElementById("data_zone2").style.display="block";
              document.querySelector('#data_zone2').innerHTML = '<p><strong>' + color + '</strong></p>' + '<img id="imgXYZ" src="imgXYZ.png" />';
            })
        </script>

当前结果看起来像这样但是所需的结果是这个

Answer 1

将您的两个部分扔到DIV中，并带有您喜欢的ID，例如id="Container"和使用jQuery(看起来您正在使用(，您只需将一个类添加到包含您想要的样式的DIV的类中即可。这样：

$("#data_zone2").hide();
$('#button1').click(function () {
          var color = $("#txtNameDist").val();
          $('#data_zone').html('<p><strong>' + color + '</strong></p>' + '<img id="imgABC" src="imgABC.png" />');
        })
        $('#button2').click(function () {
          var color = $("#txtNameDist").val();
          $("#data_zone2").hide();
          $('#data_zone2').html('<p><strong>' + color + '</strong></p>' + '<img id="imgXYZ" src="imgXYZ.png" />');
          $('#Container').addClass('fancy-border-stuff');
        })
    </script>

Answer 2

将您的 section s包含在定义边框的类中的元素中( .borderexample(

.borderexample{
  border-style:solid;
  border-color:#287EC7;
}
div.borderexample {
  padding: 2em;
}
p {
    display: inline-block;
    border-right: 1px dotted black;
}
img {
    vertical-align: middle;
    max-width: 20%;
}
p:after {
    margin-right: 1em;
    content: "";
}
img:before {
    margin-left: 1em;
    content: "";
}

<div class="borderexample">
  <section class="borderexample" id="data_zone">
  </section>
  <section class="borderexample" id="data_zone2">
  </section>
</div>
<button id="button1">button1</button>
<button id="button2">button2</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
  $(function() {
    document.getElementById("data_zone2").style.display = "none";
    $("#button1").on("click", function() {
      var color = "color";
      document.querySelector("#data_zone").innerHTML =
        "<p><strong>" +
        color +
        "</strong></p>" +
        '<img id="imgABC" src="https://i.stack.imgur.com/2C22p.jpg" />';
    });
    $("#button2").click(function() {
      var color = "color";
  
      document.getElementById("data_zone2").style.display = "block";
      document.querySelector("#data_zone2").innerHTML =
        "<p><strong>" +
        color +
        "</strong></p>" +
        '<img id="imgXYZ" src="https://i.stack.imgur.com/2C22p.jpg" />';
    });
  });
</script>