html - 在边框内看不到按钮-6ren

html - 在边框内看不到按钮

转载作者：太空宇宙更新时间：2023-11-03 22:25:05

下面的代码由 2 个列表组成，我目前想要完成的是将我的按钮放在 Random Fruits list 中，如下图所示。

问题是我不确定为什么当我将按钮 div 放在边框内时它就没有出现。有没有直接的方法来完成这个？任何帮助将不胜感激谢谢!

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


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

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', '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;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

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

.top {
  margin-bottom: 20px
}

h3 {
  font-weight: normal;
}

.panel {
  display: table;
  height: 100%;
  width: 85%;
  background-color: white;
  border: 1px solid black;
  margin-left: auto;
  margin-right: auto;
}

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

.top {
  margin-bottom: 30px;
}

#leftpanel {
  float: left;
  width: calc(50% - 5px);
}

#rightpanel {
  float: right;
  width: calc(50% - 5px);
}

.container {
  width: 100%;
}

.suggestid {
  border: 1px solid black;
}

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <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>


  <style>

  </style>

</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="suggestid randomclass wrappingflexbox top"></div>
      <div class="center">
        <input class="modal-button explanation" style="white-space: pre-wrap;" type="button" data-toggle="modal" data-target="#myModal" value=" + View Interactive Skills Analysis Map!" />
      </div>
    </div>
  </div>


  </div>

  </div>


  <script>
  </script>
</body>

</html>

最佳答案

请将 $('.randomclass').html(randomString); 更改为 $('.randomclass').prepend(randomString); 以防止覆盖按钮。

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


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

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', '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').prepend(randomString);
}



function listener() {
  $(document).ready(function() {
    $(document).on("click", "#suggestid .pilldiv", 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;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.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;
  width: 100%;
}

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

.top {
  margin-bottom: 20px
}

h3 {
  font-weight: normal;
}

.panel {
  display: table;
  height: 100%;
  width: 85%;
  background-color: white;
  border: 1px solid black;
  margin-left: auto;
  margin-right: auto;
}

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

.top {
  margin-bottom: 30px;
}

#leftpanel {
  float: left;
  width: calc(50% - 5px);
}

#rightpanel {
  float: right;
  width: calc(50% - 5px);
}

.container {
  width: 100%;
}

.suggestid {
  border: 1px solid black;
}

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <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>


  <style>

  </style>

</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="suggestid randomclass wrappingflexbox top">        <div class="center"><input class="modal-button explanation" style="white-space: pre-wrap;" type="button" data-toggle="modal" data-target="#myModal" value=" + View Interactive Skills Analysis Map!" /></div>
</div>
      
      
    </div>
  </div>


  </div>

  </div>


  <script>
  </script>
</body>

</html>

关于html - 在边框内看不到按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51604918/

文章推荐： c# - 无法在我的 WPF 网格中创建列

文章推荐： python - 检测不同颜色的 Blob opencv

文章推荐： c# - 如何将我的组件放入 Visual Studio 工具箱中的新组中？

文章推荐： image-processing - 如何在 numpy 中优化这个图像迭代？

Java的TextField无法解析，看不到
我一直在尝试处理一个类项目，在该项目中我必须设置一个面向 GUI 的转换程序，并且我试图将数据从我的类的方法传递到 ActionListener，但监听器是告诉我文本字段不存在。它位于同一个包和类中，
PHP 看不到 bcmath
我在服务器上有两个版本的 PHP(Centos 6.8) - 5.6 和 7.1 我的 Nginx 使用 php7.1，它不是默认的 PHP 解释器。经过一番与 yum 的斗争后，我安装了 php7
Cmake 看不到 OpenCL
我正在尝试为 BEAGLE 安装 OpenCL .首先，我下载了 intel_sdk_for_opencl_applications_2020.3.494.tar.gz 来自 here .然后我解压并
java - 看不到 JPanel
我想知道为什么我在 controlPanel 中看不到 topPanel 这是我的代码: import java.awt.BorderLayout; import java.awt.Color; im
Django 看不到 View
在我的 urls.py 中，我有以下内容: urlpatterns = patterns('', # Examples: #url(r'^$', 'welcome_page.home'
c# - 看不到 FirstOrDefault
非常感谢大家的帮助! 在 GetProductByID 下，我收到一条错误消息“int does not contain a definition for FirstOrDefault”。 using
java 看不到 CLASSPATH
1) 我已经通过 my computuer -> System variables; 设置了变量 CLASSPATH 2) 重新启动控制台并键入 echo %CLASSPATH%，CLASSPATH
PHP 看不到 MySQL
我已经看过这篇文章了PHP doesn't see mysql extension ，但这对我没有帮助。我使用: Windows Seven(在虚拟机中为 32 位，在真实电脑上为 64 位) 带
Python3 看不到 Django
当我尝试通过输入 python3 来验证 Python3 是否可以看到 Django 时其次是 import django进入终端(这样我就可以打印 Django 的版本号)，我得到以下错误: Tra
Python 看不到 pygraphviz
我已经使用 easy_install 安装了 pygraphviz但是当我启动 python 时出现错误: >>>import pygraphviz as pgv Traceback (most re
xaml - 看不到 XAML 实时可视化树
在向 Microsoft 报告之前，我想在这里问一下。我有一个问题，我无法看到我的 WinUI 3 应用程序的实时可视化树。我什至看不到应用程序内工具栏。我可以在 WPF 和 UWP 应用程序中看到，
svg - 看不到 SVG 文本
我对缺乏基本的了解和内。我希望看到 39 个 svg 子元素，100 像素高，每个子元素中都有清晰的文本。 http://jsfiddle.net/pn5sj8ge/ 最佳答案发生这种情况的原因
php - Phing 看不到 PHPUnit
我正在尝试设置一个新的持续集成服务器，该服务器利用 Phing 和 PHPUnit 自动运行测试用例。我已经用 Pear 安装了 Phing: pear channel-discover pear.
LuaJIT 看不到 LuaRocks 安装的岩石
lua -e "print(package.path)" ./?.lua;/usr/share/lua/5.1/?.lua;/usr/share/lua/5.1/?/init.lua;/usr/lib
c++ - Clang++ 看不到 libc++
我刚刚从 https://github.com/llvm/llvm-project.git 安装了 clang++ 和 libc++ .尝试运行时: clang main.cpp -stdlib=li
javascript - 看不到 Highstock 图表中的最后一点
我一直在使用 Highstock 图表，我注意到当图表中有很多点时，无法使用工具提示查看最后一个点: 您可以看到工具提示显示了 5 月 9 日的点，而还有一个显示 5 月 10 日的点(正如您在范围选
php - PHP-警告消息太长，看不到？
This question already has answers here: error_log message is truncated when using print_r (5个答案) 1年前
Selenium 看不到 AngularJS 页面元素
我在编写 Selenium 测试来检查我的应用程序时遇到问题。我想测试的是，当用户输入正确的登录名/密码时，会显示正确的页面并且用户已登录。主要问题是我的登录表单是作为 AngularJS 指令生成
Azure 看不到 Index.cshtml
我正在尝试在 Azure 服务上发布我的 ASP.NET Core 应用程序。这有效，但是当我尝试使用应用程序功能时，我收到消息 Your App Service app is up and runn
javascript - 看不到 ionic 导航按钮
在我的 ionic 应用程序中，我有一个功能，用户应该在应用程序的导航栏中看到水平点线，单击它们，然后应该出现一个弹出菜单，其中包含两个菜单项(添加到收藏夹并添加评论)。下图说明了我的观点。问题是这

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 在边框内看不到按钮