javascript - 让 JQuery 创建多个按钮，这些按钮使用 CSS 在一组中设置样式

Question

非常公平的警告，对于大多数 JS，我都是新手。

我正在从事一个独特的元素，我正在为我公司拥有的产品自定义网站子部分的视觉外观。我无法更改页面的 HTML 代码(出于高于我的薪水等级的原因)，因此我添加/更改的所有内容都是通过 JS 和 CSS 的组合完成的。

我的问题是我创建了一系列按钮，并在 CSS 中将它们组织成一个组。我使用 JS 将按钮放置在页面上，其中包含每个按钮应该执行的功能(通常只是导航到 URL)，然后通过 CSS 进一步修改按钮组的位置。当按钮没有使用 CSS 分组时，我能够很容易地做到这一点，但后来我意识到我需要将按钮无缝地组织在一起，同时使用 margin-left 属性来滑动组作为一个整体到页面的特定部分。

JS 代码如下所示:

<script type="text/javascript">

$( document ).ready(function() {
    $('#productToolbar').append('<button onclick="goHome()" class="toolbar-btn">Home</button>');
    }
);

function goHome() {
    window.location.href = 'https://www.home-page.org/';
    }     

$( document ).ready(function() {
    $('#productToolbar').append('<button onclick="contact()" class="toolbar-btn">Contact Us</button>');
    }
);

function contact() {
    window.location.href = 'https://www.home-page.org/contact/';
    }       

CSS 看起来像这样:

.toolbar-btn-group .toolbar-btn {
  display: inline-block;
  padding: 15px 25px;
  font-size: 10px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #ffffff;
  background-color: #780a29;
  border: none;
  float: left;
}
.toolbar-btn-group .toolbar-btn:hover {background-color: #490619
}
.toolbar-btn-group {
    margin-left: 25%;
}

输出结果只是没有样式的通用按钮，而不是在我想要它们的屏幕上(它们被正确附加，只是由于缺少 CSS 样式而没有向右滑动)。它们运行正常，但仅此而已。

如果我没有正确理解我自己的代码，那么发生的事情是 JS 正在创建按钮，将它们分配为 toolbar-btn 类，并将它们附加到 #productToolbar 分区。他们没有收到 .toolbar-btn CSS 样式，因为他们是 .toolbar-btn-group 类的子级。

但我不知道该怎么做，是编写 JS 代码来创建一组按钮，这些按钮具有接收 CSS 样式的必要数量的按钮(假设这是可能的)。

Answer 1

假设这不会弄乱页面中的其他布局，最简单的解决方案是在容器中添加 .toolbar-btn-group 类:

$(document).ready(function() {
  $('#productToolbar').append('<button onclick="goHome()" class="toolbar-btn">Home</button>');
  $('#productToolbar').append('<button onclick="contact()" class="toolbar-btn">Contact Us</button>');
  $('#productToolbar').addClass('toolbar-btn-group'); // <-- here
});

.toolbar-btn-group .toolbar-btn {
  display: inline-block;
  padding: 15px 25px;
  font-size: 10px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #ffffff;
  background-color: #780a29;
  border: none;
  float: left;
}

.toolbar-btn-group .toolbar-btn:hover {
  background-color: #490619
}

.toolbar-btn-group {
  margin-left: 25%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="productToolbar"></div>

如果这会导致问题——即，如果您不希望部分或全部 toolbar-btn-group 样式影响产品工具栏——您可能只需要复制 CSS专门针对产品工具栏元素:

#productToolbar .toolbar-btn {
  display: inline-block;
  padding: 15px 25px;
  /* ...etc... */
}

当然远非理想，但整体情况也是如此。 (我很同情。也去过那里。)