Bootstrap3 Toggle 仅作为 Toggle 出现一次
Bootstrap3 Toggle appearing only once as Toggle
我没有找到任何可以帮助我的问题。我没有使用 Bootstrap4，因此，如果除了更改 Bootstrap 版本之外还有任何其他解决方案，我们将不胜感激。
我正在使用 Node.js、CSS、HTML 和 Javascript 进行网络开发。我的网站有两个复选框，我正在将其更改为 Toggles。在我的代码中，切换设置如下：
'<div class="options">'
'<input type="checkbox" id="draw-line" checked data-toggle="toggle" data-size="mini" data-on="Traçar trajetória" data-off="Traçar trajetória"/>'
'</div>'
'<div class="options mrg-botm" style="margin-top: 5px">'
'<input type="checkbox" id="show-info" checked data-toggle="toggle" data-size="mini" data-on="Informações de localização" data-off="Informações de localização"/>'
'</div>'
单击“历史记录”按钮时，此代码将附加到 HTML 主体，单击“关闭”按钮时，此代码将被删除。我们还创建了一个方便的工具来使这些 Toggles 具有反应性。 （有变量直接监听Toggle按钮，长话短说）。
但是，当我用切换开关打开同一个面板时，它们显示如下：
单击“历史记录”按钮时添加到 HTML 文档的完整代码如下（带注释的关键部分）：
new ScopedWatcher(
() => watch.historyPanel.value,
async () => {
if (watch.historyPanel.value) {
// here, the panel DIV code
var historyPanelCode =
'<div id="hist-loc-control-panel" class="draggable floating-panel">' +
'<span class="title"><b>Histórico de localização</b></span><br>' +
'<div class="input-group date" id="datetimepicker_from" style="width: 200px;">' +
'<input type="text" class="form-control" id="date_from" />' +
'<span class="input-group-addon">' +
'<span class="fa fa-calendar"></span>' +
'</span>' +
'</div>' +
'até' +
'<div class="input-group date" id="datetimepicker_to" style="width: 200px; margin-bottom: 5px">' +
'<input type="text" class="form-control" id="date_to" />' +
'<span class="input-group-addon">' +
'<span class="fa fa-calendar"></span>' +
'</span>' +
'</div>' +
'<div>' +
'Empréstimo' +
'</div>' +
'<div>' +
'<select id="leasing_option" style="margin-bottom: 5px;">' +
'<option value="1">Atual</option>' +
'<option value="2">Todos do dispositivo</option>' +
'<option value="3">Todos do colaborador atual</option>' +
'</select>' +
'</div>' +
'<button class="btn btn-primary btn-xs search mrg-botm">Buscar</button>' +
'<div id="history-location-position-info" class="btn-xs"></div>' +
'<button class="btn btn-success btn-xs hist-loc-button" id="first" disabled><<</button>' +
'<button class="btn btn-success btn-xs hist-loc-button" id="back" disabled><</button>' +
'<button class="btn btn-success btn-xs hist-loc-button" id="forward">></button>' +
'<button class="btn btn-success btn-xs hist-loc-button" id="last">>></button>' +
'<div class="mrg-botm"></div>' +
'<div class="options">' +
'<input type="checkbox" id="draw-line" checked data-toggle="toggle" data-size="mini" data-on="Traçar trajetória" data-off="Traçar trajetória"/>' +
'</div>' +
'<div class="options mrg-botm" style="margin-top: 5px">' +
'<input type="checkbox" id="show-info" checked data-toggle="toggle" data-size="mini" data-on="Informações de localização" data-off="Informações de localização"/>' +
'</div>' +
'<div class="options"><label style="vertical-align:middle">Deslocamento total aproximado: </label></br><label style="vertical-align:middle" id="sum-distance"></label></div></br>' +
'<div><button id="close-history-btn" class="btn btn-warning btn-xs">Fechar histórico</button><br></div>' +
'</div>'
$('body').append($(historyPanelCode))
$('.draggable').draggable()
$('#datetimepicker_from')
.datetimepicker({
defaultDate: new Date().setHours(0, 0, 0, 0),
locale: 'pt-br',
showClose: false,
})
.on('dp.change', function () {
// getHistory(imei);
$(this).data('DateTimePicker').hide()
})
$('#datetimepicker_to')
.datetimepicker({
defaultDate: new Date().setHours(23, 59, 0, 0),
locale: 'pt-br',
showClose: false,
})
.on('dp.change', function () {
// getHistory(imei);
$(this).data('DateTimePicker').hide()
})
$('#hist-loc-control-panel')
.on('click', 'button.hist-loc-button', function (event) {
var selectedMarkerArrayPos = watch.selectedMarkerArrayPos
var pos
switch (event.target.id) {
case 'forward':
pos = ++selectedMarkerArrayPos
break
case 'back':
pos = --selectedMarkerArrayPos
break
case 'last':
pos = markerArray.length - 1
break
default:
pos = 0
break
}
watch.selectedMarkerArrayPos = pos
displayInfoMessage(markerArray[watch.selectedMarkerArrayPos])
})
.on('click', '#draw-line', function (event) {
if (watch.toggleLineDraw.value !== false) {
linePath.setMap(map)
} else {
linePath.setMap(null)
}
})
.on('click', '#show-info', function (event) {
if (watch.showInfo === true) {
displayInfoMessage(markerArray[watch.selectedMarkerArrayPos])
} else {
closeAllInfoWindow()
}
})
.on('click', '#close-history-btn', function () {
finalizeHistory()
initializeRTP()
})
.on('click', '.search', function () {
getHistory(watch.historyPanel.id)
})
// init() loads the JS bootstrap modules referring to Toggle.
// thought that running init() just once would solve it...
// start is a var that counts how many times the HistoryPanel button was clicked.
if (start < 2) {
new Toggle('#draw-line', watch.toggleLineDraw).init()
new Toggle('#show-info', watch.showInfo).init()
}
} else {
$('#hist-loc-control-panel').remove()
}
}
)
反应式开关仅实例化一次。
因此，解决方案是：只构建一次。
我正在用整个页面的 Toggles 构建面板，但我在开始时让它不可见。仅当用户单击通向面板的按钮时它才会变为可见。
我没有找到任何可以帮助我的问题。我没有使用 Bootstrap4，因此，如果除了更改 Bootstrap 版本之外还有任何其他解决方案，我们将不胜感激。
我正在使用 Node.js、CSS、HTML 和 Javascript 进行网络开发。我的网站有两个复选框，我正在将其更改为 Toggles。在我的代码中，切换设置如下：
'<div class="options">'
'<input type="checkbox" id="draw-line" checked data-toggle="toggle" data-size="mini" data-on="Traçar trajetória" data-off="Traçar trajetória"/>'
'</div>'
'<div class="options mrg-botm" style="margin-top: 5px">'
'<input type="checkbox" id="show-info" checked data-toggle="toggle" data-size="mini" data-on="Informações de localização" data-off="Informações de localização"/>'
'</div>'
单击“历史记录”按钮时，此代码将附加到 HTML 主体，单击“关闭”按钮时，此代码将被删除。我们还创建了一个方便的工具来使这些 Toggles 具有反应性。 （有变量直接监听Toggle按钮，长话短说）。
但是，当我用切换开关打开同一个面板时，它们显示如下：
单击“历史记录”按钮时添加到 HTML 文档的完整代码如下（带注释的关键部分）：
new ScopedWatcher(
() => watch.historyPanel.value,
async () => {
if (watch.historyPanel.value) {
// here, the panel DIV code
var historyPanelCode =
'<div id="hist-loc-control-panel" class="draggable floating-panel">' +
'<span class="title"><b>Histórico de localização</b></span><br>' +
'<div class="input-group date" id="datetimepicker_from" style="width: 200px;">' +
'<input type="text" class="form-control" id="date_from" />' +
'<span class="input-group-addon">' +
'<span class="fa fa-calendar"></span>' +
'</span>' +
'</div>' +
'até' +
'<div class="input-group date" id="datetimepicker_to" style="width: 200px; margin-bottom: 5px">' +
'<input type="text" class="form-control" id="date_to" />' +
'<span class="input-group-addon">' +
'<span class="fa fa-calendar"></span>' +
'</span>' +
'</div>' +
'<div>' +
'Empréstimo' +
'</div>' +
'<div>' +
'<select id="leasing_option" style="margin-bottom: 5px;">' +
'<option value="1">Atual</option>' +
'<option value="2">Todos do dispositivo</option>' +
'<option value="3">Todos do colaborador atual</option>' +
'</select>' +
'</div>' +
'<button class="btn btn-primary btn-xs search mrg-botm">Buscar</button>' +
'<div id="history-location-position-info" class="btn-xs"></div>' +
'<button class="btn btn-success btn-xs hist-loc-button" id="first" disabled><<</button>' +
'<button class="btn btn-success btn-xs hist-loc-button" id="back" disabled><</button>' +
'<button class="btn btn-success btn-xs hist-loc-button" id="forward">></button>' +
'<button class="btn btn-success btn-xs hist-loc-button" id="last">>></button>' +
'<div class="mrg-botm"></div>' +
'<div class="options">' +
'<input type="checkbox" id="draw-line" checked data-toggle="toggle" data-size="mini" data-on="Traçar trajetória" data-off="Traçar trajetória"/>' +
'</div>' +
'<div class="options mrg-botm" style="margin-top: 5px">' +
'<input type="checkbox" id="show-info" checked data-toggle="toggle" data-size="mini" data-on="Informações de localização" data-off="Informações de localização"/>' +
'</div>' +
'<div class="options"><label style="vertical-align:middle">Deslocamento total aproximado: </label></br><label style="vertical-align:middle" id="sum-distance"></label></div></br>' +
'<div><button id="close-history-btn" class="btn btn-warning btn-xs">Fechar histórico</button><br></div>' +
'</div>'
$('body').append($(historyPanelCode))
$('.draggable').draggable()
$('#datetimepicker_from')
.datetimepicker({
defaultDate: new Date().setHours(0, 0, 0, 0),
locale: 'pt-br',
showClose: false,
})
.on('dp.change', function () {
// getHistory(imei);
$(this).data('DateTimePicker').hide()
})
$('#datetimepicker_to')
.datetimepicker({
defaultDate: new Date().setHours(23, 59, 0, 0),
locale: 'pt-br',
showClose: false,
})
.on('dp.change', function () {
// getHistory(imei);
$(this).data('DateTimePicker').hide()
})
$('#hist-loc-control-panel')
.on('click', 'button.hist-loc-button', function (event) {
var selectedMarkerArrayPos = watch.selectedMarkerArrayPos
var pos
switch (event.target.id) {
case 'forward':
pos = ++selectedMarkerArrayPos
break
case 'back':
pos = --selectedMarkerArrayPos
break
case 'last':
pos = markerArray.length - 1
break
default:
pos = 0
break
}
watch.selectedMarkerArrayPos = pos
displayInfoMessage(markerArray[watch.selectedMarkerArrayPos])
})
.on('click', '#draw-line', function (event) {
if (watch.toggleLineDraw.value !== false) {
linePath.setMap(map)
} else {
linePath.setMap(null)
}
})
.on('click', '#show-info', function (event) {
if (watch.showInfo === true) {
displayInfoMessage(markerArray[watch.selectedMarkerArrayPos])
} else {
closeAllInfoWindow()
}
})
.on('click', '#close-history-btn', function () {
finalizeHistory()
initializeRTP()
})
.on('click', '.search', function () {
getHistory(watch.historyPanel.id)
})
// init() loads the JS bootstrap modules referring to Toggle.
// thought that running init() just once would solve it...
// start is a var that counts how many times the HistoryPanel button was clicked.
if (start < 2) {
new Toggle('#draw-line', watch.toggleLineDraw).init()
new Toggle('#show-info', watch.showInfo).init()
}
} else {
$('#hist-loc-control-panel').remove()
}
}
)
反应式开关仅实例化一次。 因此，解决方案是：只构建一次。
我正在用整个页面的 Toggles 构建面板，但我在开始时让它不可见。仅当用户单击通向面板的按钮时它才会变为可见。