无法在面板内放置文字

时间：2018-07-03 08:34:56

标签： javascript html css

我下面的代码包含2个div列表。我当前要完成的工作是在random fruits list内插入一行文本。我尝试在p tag内添加suggestid div，但是它没有出现，我不确定为什么。

我正尝试像下面的图片一样在此处放置文本。但这并不会带来任何帮助，谢谢。 enter image description here 

var redpill = {};
var greenpill = {};
var randompill = {};

var key = "Red Fruits";
redpill[key] = ['Apple', 'Cherry', 'Strawberry', 'Pomegranate', 'Rassberry', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon','Apple', 'Cherry', 'Strawberry', 'Pomegranate'];

var key2 = "Green Fruits";
greenpill[key2] = ['Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew'];

var key3 = "Random Fruits";
randompill[key3] = ['Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew'];

function redraw() {
  var combineString = '';
  $.each(redpill[key], function(index) {
    combineString += ('<div class="pilldiv redpill class">' + redpill[key][index] + '</div>');
  });
  $('.combineclass').html(combineString);

  $.each(greenpill[key2], function(index) {
    combineString += ('<div class="pilldiv greenpill class">' + greenpill[key2][index] + '</div>');
  });
  $('.combineclass').html(combineString);

  var randomString = '';
  $.each(randompill[key3], function(index) {
    randomString += ('<div class="pilldiv randompill class">' + randompill[key3][index] + '</div>');
  });
  $('.randomclass').html(randomString);
}

function listener() {
  $(document).ready(function() {
    $(document).on("click", "#suggestid div", function() {
      data = this.innerHTML;
      $(".total_count_Green_Fruits").html(key2 + ': ' + greenpill[key2].length);
      var element = $(this).detach();
      $('#currentid').prepend('<div class="new-green-fruit pilldiv class ">' + element.html() + '</div>');
            
    });
  });

  $('body').on('click', 'div.new-green-fruit', function() {
    data2 = this.innerHTML;
    $(this).detach();
    var element2 = $(this).detach();
    $('#suggestid').prepend('<div class="pilldiv randompill class" >' + element2.html() + '</div>');
        
  });
}
redraw();
listener();
.pilldiv {
  padding: 8px 15px;
  text-align: center;
  font-size: 15px;
  border-radius: 25px;
  color: Black;
  margin: 2px;
}

.randompill:after {
  content: "\002B";
  float: left;
  width: 16px;
}

.new-green-fruit:after {
  content: "\292B";
  float: left;
  width: 16px;
}

.redpill {
  background-color: Pink;
  cursor: default;
}

.greenpill {
  background-color: SpringGreen;
  cursor: default;
}

.randompill {
  background-color: LightBlue;
  cursor: pointer;
}

.class {
  font-family: Open Sans;
}

.center {
  display: flex;
  justify-content: center;
}

.wrappingflexbox {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  border: 1px solid;
  padding-top:30px;
  padding-bottom:30px;
}



.new-green-fruit {
  background-color: LightBlue;
  cursor: pointer;
}


#leftpanel {
  flex-basis: calc(50% - 5px);

}

#rightpanel {
  flex-basis: calc(50% - 5px);
}

.container {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-flow: row nowrap;
  max-height: 100%;
  width: 85%;
  background-color: white;
  margin-left: auto;
  margin-right: auto;
  margin-top: 25px;
}
<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<html>
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="//#" />
  </head>

  <body>
    <div class="container">
      <div id=leftpanel>
        <h3 class="class center">Total Fruits</h3>
        <div id="currentid" class="combineclass wrappingflexbox top"></div>
      </div>

      <div id="rightpanel">
        <h3 class="class center">Random Fruits</h3>
        <div id="suggestid" class="randomclass wrappingflexbox top">
          <p>This is alot of fruits right here.</p>
        </div>
      </div>
    </div>
  </body>
</html>

1 个答案:

答案 0 :(得分：2)

.html()函数将覆盖并替换div的内容，使用.append()在div的末尾添加一些内容

var redpill = {};
var greenpill = {};
var randompill = {};


var key = "Red Fruits";
redpill[key] = ['Apple', 'Cherry', 'Strawberry', 'Pomegranate', 'Rassberry', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Apple', 'Cherry', 'Strawberry', 'Pomegranate'];

var key2 = "Green Fruits";
greenpill[key2] = ['Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew'];

var key3 = "Random Fruits";
randompill[key3] = ['Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew'];

function redraw() {
  var combineString = '';
  $.each(redpill[key], function(index) {
    combineString += ('<div class="pilldiv redpill class">' + redpill[key][index] + '</div>');
  });
  $('.combineclass').html(combineString);

  $.each(greenpill[key2], function(index) {
    combineString += ('<div class="pilldiv greenpill class">' + greenpill[key2][index] + '</div>');
  });
  $('.combineclass').html(combineString);

  var randomString = '';
  $.each(randompill[key3], function(index) {
    randomString += ('<div class="pilldiv randompill class">' + randompill[key3][index] + '</div>');
  });
  $('.randomclass').append(randomString);
}

function listener() {
  $(document).ready(function() {
    $(document).on("click", "#suggestid div", function() {
      data = this.innerHTML;
      $(".total_count_Green_Fruits").html(key2 + ': ' + greenpill[key2].length);
      var element = $(this).detach();
      $('#currentid').prepend('<div class="new-green-fruit pilldiv class ">' + element.html() + '</div>');

    });
  });

  $('body').on('click', 'div.new-green-fruit', function() {
    data2 = this.innerHTML;
    $(this).detach();
    var element2 = $(this).detach();
    $('#suggestid').prepend('<div class="pilldiv randompill class" >' + element2.html() + '</div>');

  });
}
redraw();
listener();
.pilldiv {
  padding: 8px 15px;
  text-align: center;
  font-size: 15px;
  border-radius: 25px;
  color: Black;
  margin: 2px;
}

.randompill:after {
  content: "\002B";
  float: left;
  width: 16px;
}

.new-green-fruit:after {
  content: "\292B";
  float: left;
  width: 16px;
}

.redpill {
  background-color: Pink;
  cursor: default;
}

.greenpill {
  background-color: SpringGreen;
  cursor: default;
}

.randompill {
  background-color: LightBlue;
  cursor: pointer;
}

.class {
  font-family: Open Sans;
}

.center {
  display: flex;
  justify-content: center;
}

.wrappingflexbox {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  border: 1px solid;
  padding-top: 30px;
  padding-bottom: 30px;
}

.new-green-fruit {
  background-color: LightBlue;
  cursor: pointer;
}

#leftpanel {
  flex-basis: calc(50% - 5px);
}

#rightpanel {
  flex-basis: calc(50% - 5px);
}

.container {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-flow: row nowrap;
  max-height: 100%;
  width: 85%;
  background-color: white;
  margin-left: auto;
  margin-right: auto;
  margin-top: 25px;
}
<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<html>

<head>
  <meta charset="utf-8" />
  <link rel="shortcut icon" href="//#" />

</head>

<body>
  <div class="container">

    <div id=leftpanel>
      <h3 class="class center">Total Fruits</h3>
      <div id="currentid" class="combineclass wrappingflexbox top"></div>
    </div>

    <div id="rightpanel">
      <h3 class="class center">Random Fruits</h3>
      <div id="suggestid" class="randomclass wrappingflexbox top">
        <p>This is alot of fruits right here.</p>
      </div>
    </div>
    
  </div>
</body>

</html>

相关问题
最新问题