我有以下功能,我试图找出一个更好的方法来使用附加多个项目appendChild().
当用户点击"添加"时,每个项目应如下所示:
<li>
<input type="checkbox">
<label>Content typed by the user</label>
<input type="text">
<button class="edit">Edit</button>
<button class="delete">Delete</button>
</li>
我有这个功能来添加这些元素:
function addNewItem(listElement, itemInput) {
var listItem = document.createElement("li");
var listItemCheckbox = document.createElement("input");
var listItemLabel = document.createElement("label");
var editableInput = document.createElement("input");
var editButton = document.createElement("button");
var deleteButton = document.createElement("button");
// define types
listItemCheckbox.type = "checkbox";
editableInput.type = "text";
// define content and class for buttons
editButton.innerText = "Edit";
editButton.className = "edit";
deleteButton.innerText = "Delete";
deleteButton.className = "delete";
listItemLabel.innerText = itemText.value;
// …我一直在寻找这个错误的解决方案超过一个星期,但找不到任何东西.由于这个imagemin-jpegtran,我无法在Yeoman上构建我的dist包
我试图上传图像以显示错误并使事情变得更容易,但Stackoverflow不允许我声誉(不知道声誉与图像有什么关系......但无论如何......).
这是错误:
Running "concurrent:dist" (concurrent) task Warning: Loading "imagemin.js" tasks... ERROR Error: Cannot find module 'imagemin-jpegtran' Warning: Task "imagemin" not found. Use --force to continue Aborted due to warnings. Use --force to continue Aborted due to warnings.
我正在使用Bootstrap Switch插件和Bootstrap Modal.用户单击以将"切换"更改on为off"模态"框后,请求确认.
如何在交换机从更改on到off或off到on用户点击确认按钮后,才？如果用户单击"取消",则交换机应返回Off状态.
$("#myswitch").bootstrapSwitch();
$('#myswitch').on('switchChange.bootstrapSwitch', function (e, data) {
$('#showModal').modal({
backdrop: 'static',
keyboard: false
});
});
我正在尝试使用display: flex和在 div 之间添加一些间距flex-wrap: wrap。
问题是当我申请margin-right第二项时，行会中断。如何在不将它们分成 2 行的情况下在项目之间添加一些间距？
* {
box-sizing: border-box;
}
// Default
// ----------------------------------------------------
.collage {
position: relative;
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
margin-bottom: 32px;
}
.collage-item {
width: 100%;
height: 25vw;
background: url("https://www.audi.co.uk/content/dam/audi/production/Models/NewModelsgallery/A5range/A5_Coupe/MY17/1920x1080_A5-Coupe-2016-side.jpg") no-repeat;
background-size: cover;
flex: 0 0 50%;
&: nth-child(1) {
margin-bottom: 16px;
}
&:nth-child(2) {
margin-right: 16px;
}
&:nth-child(4) {
margin-top: 16px;
}
&:nth-child(1),
&:nth-child(4) {
flex: 0 0 100%;
height: 50vw;
} …我试图定位type="number"页面上的所有输入，但只有第一个输入被触发。有谁知道为什么以及如何定位所有输入元素？
我的JS：
// Select your input element.
var numInput = document.querySelector('input');
// Listen for input event on numInput.
numInput.addEventListener('input', function(){
// Let's match only digits.
var num = this.value.match(/^\d+$/);
if (num === null) {
// If we have no match, value will be empty.
this.value = "";
}
}, false)
我正在尝试使用 BEM 命名约定，但在决定在哪里包含特定页面的修饰符时遇到了一些困难。
例如，假设我有一个橙色按钮：
<button class="btn btn-orange">Button A</button>
我的项目有 3 个不同的页面：
- pageA.html - pageA.scss
- pageB.html - pageB.scss
- pageC.html - pageC.scss
pageB.html按钮上应该有一个margin-top:30px. 这样写修饰符是否正确：
.btn {
padding: 5px 20px;
background: orange;
margin: 0
&--margin-top {
margin-top: 30px;
}
}
仅为特定页面包含这样的修饰符的最佳方法是什么？在这种情况下，这将是为pageB.html. 我应该在pageB.scssor中包含该修饰符.buttons.scss吗？
我正在尝试flexbox在同一容器上创建一个具有全宽和多列的行.
我已经尝试flex-break: after;但不确定我错过了什么.我试图避免像.fullwidth和等多个类.multiple-columns.
这就是我想要实现的目标:
------------------------
| |
| |
| item A |
| |
| |
------------------------
| | |
| | |
| B | C |
| | |
| | |
------------------------
| |
| |
| item D |
| |
| |
------------------------
.collage {
position: relative;
display: flex;
justify-content: flex-start;
align-items: center;
}
.fullwidth {
flex-break: after;
}
.collage-item {
width: 100%;
height: 25vw;
background: …该脚本工作正常,但我想知道是否有办法避免代码中的重复(DRY方法).
JS代码:
// Checkbox checked and input disbaled when page loads
$('#checkbox').prop('checked', true);
if ($('#checkbox').is(':checked') == true) {
$('#textInput').prop('disabled', true);
}
// Enable-Disable text input when checkbox is checked or unchecked
$('#checkbox').change(function() {
if ($('#checkbox').is(':checked') == true) {
$('#textInput').prop('disabled', true);
} else {
$('#textInput').val('').prop('disabled', false);
}
});
我正在使用selectpicker插件,我正在尝试更改向下箭头图标.我尝试使用CSS但它没有用.我怎么能改变那个图标？
<select class="form-control selectpicker" data-hide-disabled="true" data-show-subtext="true" data-live-search="true">
<option value="" disabled selected></option>
<option value="update" data-subtext="old subtext">Update subtext</option>
<option value="delete" data-subtext="more subtext">Delete subtext</option>
</select>
CSS
.bootstrap-select.btn-group .dropdown-toggle .caret {
display: none;
}
如何强制select2始终下拉并永不掉线？
我尝试了这个解决方案,但它不起作用:这不起作用
$("#e1").select2()
.on('select2-open', function() {
// however much room you determine you need to prevent jumping
var requireHeight = 600;
var viewportBottom = $(window).scrollTop() + $(window).height();
// figure out if we need to make changes
if (viewportBottom < requireHeight)
{
// determine how much padding we should add (via marginBottom)
var marginBottom = requireHeight - viewportBottom;
// adding padding so we can scroll down
$(".aLwrElmntOrCntntWrppr").css("marginBottom", marginBottom + "px");
// animate to just above the select2, now with plenty …