试试这个ajax代码
$.ajax({
url: "../server/CustomMsg.php",
type: "POST",
data: form_data,
contentType: false,
cache: false,
processData:false,
async: true,
success: function(html) {
if (html == 1) {
$('#register_form').fadeOut('slow');
$('.loading').fadeOut();
$('.message').html('Successfully Sent ! ').fadeIn('slow');
} else
alert('Sorry, unexpected error. Please try again later.');
}
});
基本上，当您单击“切换终端”时，它应该显示蓝色，然后如果您再次单击，则返回黑色；当您单击“切换 vnc”时，它应该显示绿色，然后如果您再次单击，则返回黑色。如果您单击“切换 vnc”并且它已经是蓝色，它应该变成绿色，反之亦然（但单击“切换终端”）
我目前有以下内容Js：
var terminal = document.getElementById('terminal'); //video-like element
var vncScreen = document.getElementById('screen'); //video-like element
var video = document.getElementById('video'); //video-like element
var vncToggle = document.getElementById('vncToggle'); //button
var termToggle = document.getElementById('terminalToggle'); //button
termToggle.onclick = function toggleTerminal() {
terminal.classList.toggle('hide');
vncScreen.classList.toggle('hide');
video.classList.toggle('hide');
}
和css：
.hide {
display: none;
}
当我只有两个不同的 HTML 元素时，这种类切换方法就起作用了。现在有 3 个，我不确定它是否会按预期工作。
video最初是可见的，即hide不在其内部classList
terminal最初是隐藏的，hide即位于其classList
vncScreen最初是隐藏的，hide即位于其classList
何时toggleTerminal()调用：
video变得隐藏
terminal变得可见
vncScreen变得可见（但不应该）
如果toggleVNC()被调用（之后toggleTerminal()）：
video再次变得可见（但不应该）
terminal变得隐藏
vncScreen变得隐藏
请注意，如果任一函数调用仅由其自身切换，则此方法将起作用（前提是我删除了vncScreen.classList.toggle('hide');intoggleTerminal()和terminal.classList.toggle('hide');in toggleVNC()）。
问题是我需要考虑 和 按钮按下的任何termToggle顺序vncToggle。本质上，我的目标是“循环”这些元素，以便：
1) 切换“选定”元素（即termToggle对应于terminal元素的可见性 &&vncToggle对应于vncScreen元素的可见性）隐藏其余两个元素（分别为video&& vncScreen|| terminal&& video）
2) “选定”元素的切换顺序不影响 1)
3）“选定”元素的第二个切换将隐藏其自身以及其他未选定的元素video
关于如何最好地实现这一目标有什么想法吗？
有一次，我考虑做一些逻辑来评估是否hide包含在适当的中classList，然后相应地手动添加或删除hide类，但这对我来说似乎有点草率（idk，也许不是？）。
慕容森
相关分类