Question

我点击一个按钮（button1）后生成一个带边框的文字+图像。现在，我单击另一个按钮（button2），然后生成另一个带边框的文本+图像。但这一次（当按下button2时），我想把两个有边框的文字+图像组合放在另一个边框内。我怎么做？我的代码目前看起来像

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

目前的结果如this 但期望的结果是this

Answer 1

将section换成包含定义边框的类的元素（.borderexample）

＆＃13;

.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: "";
}

＆＃13;

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

＆＃13;

Answer 2

将你的两个部分扔在一个你喜欢的id的div中，例如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>

html5：点击按钮将两个带边框的文本放在另一个边框内

2 个答案: