选择当前可见的 DIV ID 并存储在变量中
Selecting a DIV ID that is Currently Visible and Storing in a Variable
如何将当前可见的父 ID 的第一个子 ID select 存储到变量中？
我在下面列出了示例代码。这是当有人点击或按下回车键时淡入淡出的一系列内容。我在边栏中添加了一个按钮，以防有人不想完成所有步骤（实际代码中有超过 140 个 switch case 语句）并想直接转到联系表单。我一直在想如何 select 当前可见的 ID，以便在联系表单淡入时淡出它。
SAMPLE HTML 仅包含直接子 DIV
<div id="page_container">
<div id="page1"></div>
<div id="page2"></div>
<div id="page3"></div>
<div id="submitPage"></div>
</div>
<div id="side_bar">
<button id="submit_button">Click Here</button>
</div>
样本HTML
<div id="page_container">
<div id="page1" style="visibility: hidden">
<div id="inner_page1">
<div id="inner_page1_content">
Page 1 Content goes here.
</div>
<button id="button_1">Click Here</button>
<div id="click_1">press Enter</div>
</div>
<div>
<div id="page2" style="visibility: hidden">
<div id="inner_page2">
<div id="inner_page2_content">
Page 2 Content goes here.
</div>
<button id="button_2">Click Here</button>
<div id="click_2">press Enter</div>
</div>
<div>
<div id="page3" style="visibility: hidden">
<div id="inner_page3">
<div id="inner_page3_content">
Page 3 Content goes here.
</div>
<button id="button_3">Click Here</button>
<div id="click_3">press Enter</div>
</div>
<div>
<div id="submitPage" style="visibility: hidden">
<div id="inner_submitPage">
<div id="inner_submitPage_content">
Submit page Info Goes here.
</div>
<button id="button_4">Click Here</button>
<div id="click_4">press Enter</div>
</div>
<div>
</div>
<div id="side_bar">
<button id="submit_button">Click Here</button>
</div>
样本JQUERY
jQuery(document).ready(function($) {
function handleEvent(e){
var id = null;
var fade_out;
var fade_in;
var the_variable = null;
if (e.type === 'click'){
id = $(this).attr("id");
}else{
id = e.which;
}
switch (id){
case 13:
if ($('#click_1').is(':visible')){
fade_out = '#page1';
fade_in = '#page2';
}
if ($('#click_2').is(':visible')){
fade_out = '#page2';
fade_in = '#page3';
}
if ($('#click_3').is(':visible')){
fade_out = '#page3';
fade_in = '#submitPage';
}
if ($('#click_4').is(':visible')){
fade_out = '#submitPage';
fade_in = '#page1';
}
break;
case 'page1':
fade_out ='#page1";
fade_in = '#page2";
break;
case 'page2':
fade_out ='#page2";
fade_in = '#page3";
break;
case 'page3':
fade_out ='#page3";
fade_in = '#submitPage";
break;
case 'submit_button':
//something like below.....
if $('#page_container'):first-child.is(':visible').(select child ID name){
the_variable = ??child_id_name??;
fade_out = the_variable;
fade_in = '#submitPage";
}
break;
}
$(fade_out).fadeTo( 'fast', 0 ).css('visibility','hidden').css('display','none');
$(fade_in).delay( 800 ).css('visibility','visible').css('display','block').fadeTo( 'slow', 1 );
}
$('#ts_container').on('click', 'button, a', handleEvent);
$(document).on('keypress', handleEvent);
});
我终于想出了解决办法。也许不是最好的。但是，在我学会如何使用不那么乱码的更高级技术之前，它会一直有效。
我为所有内容添加了一个新的 div ID 包装器。在该内容之外创建了一个提交表单包装器，然后添加了一个新的大小写开关以淡出主 ID 包装器，并在有人单击按钮时淡入带有表单的辅助 ID 包装器。
HTML
<div id="left_sidebar"></div>
<div id="main_wrapper">
<div id="content-1"></div>
<div id="content-2"></div> + 100 More.
</div>
<div id="contact_wrapper">
<div id="contact_form2">
</div>
<div id="right_sidebar">
<button id="button1">Click Here</div>
</div>
JQUERY
case: button1:
fade_out = '#main_wrapper';
fade_in = '#contact_wrapper';
break;
您如何 select 当前可见的 parent ID 的第一个 child 并将其存储到变量中？
您可以使用条件检查第一个 children、divEl.children[0] 的计算 and/or 内联样式是否设置为 display: none 或 visibility: hidden.如果不是，则 运行 代码在变量中定义 id。
const parent = document.getElementById('parent')
const children = document.querySelectorAll('.child')
let id = '';
children.forEach(child => {
child.addEventListener('click', e => {
// comment out the following line to see differing results in assignment of ID in console
e.target.children[0].classList.toggle('hide') //<-- using a classList toggle for displaying child element.
let compStyleDisplay = getComputedStyle(e.target.children[0]).getPropertyValue('display')
let compStyleVisibility = getComputedStyle(e.target.children[0]).getPropertyValue('visibility')
// I am ONLY checking the CSS computedStyles for display and visibility,
// not the inline styles, also check if a child exists in the hidden div
compStyleDisplay !== "none" && compStyleVisibility !== "hidden" && e.target.children[0].children[0] !== undefined ? id = e.target.children[0].children[0].id : id = 'non-existent';
console.log(`first childs ID is: ${id}`)
})
})
.hide {
display: none;
visibility: hidden;
}
.id {
background: yellow;
}
#sub1,
#sub2,
#sub3,
#sub4,
#sub5 {
background-color: red;
color: white;
padding: 5px;
}
.sub {
background-color: rgba(0,0,0,0.5);
padding: 2px;
}
<div id='parent'>
<div class="child" id="1">some content
<div class="hide" id="sub1">hidden div with one child
<div class="sub" id="sub1-1">This is some child content of a hidden div</div>
<div class="sub" id="sub1-2">This is some child content of a hidden div</div>
</div>
</div>
<div class="child" id="2">some content
<div class="hide" id="sub2">hidden div with two children
<div class="sub" id="sub2-1">This is some child content of a hidden div</div>
<div class="sub" id="sub2-2">This is some child content of a hidden div</div>
</div>
</div>
<div class="child" id="3">some content
<div class="hide" id="sub3">hidden div with three children
<div class="sub" id="sub3-1">This is some child content of a hidden div</div>
<div class="sub" id="sub3-2">This is some child content of a hidden div</div>
<div class="sub" id="sub3-3">This is some child content of a hidden div</div>
</div>
</div>
<div class="child" id="4">some content
<div class="hide" id="sub4">hidden div with four children
<div class="sub" id="sub4-1">This is some child content of a hidden div</div>
<div class="sub" id="sub4-2">This is some child content of a hidden div</div>
<div class="sub" id="sub4-3">This is some child content of a hidden div</div>
<div class="sub" id="sub4-4">This is some child content of a hidden div</div>
</div>
</div>
<div class="child" id="5">some content
<div class="hide" id="sub5">Hidden div without children</div>
</div>
</div>
如何将当前可见的父 ID 的第一个子 ID select 存储到变量中？
我在下面列出了示例代码。这是当有人点击或按下回车键时淡入淡出的一系列内容。我在边栏中添加了一个按钮，以防有人不想完成所有步骤（实际代码中有超过 140 个 switch case 语句）并想直接转到联系表单。我一直在想如何 select 当前可见的 ID，以便在联系表单淡入时淡出它。
SAMPLE HTML 仅包含直接子 DIV
<div id="page_container">
<div id="page1"></div>
<div id="page2"></div>
<div id="page3"></div>
<div id="submitPage"></div>
</div>
<div id="side_bar">
<button id="submit_button">Click Here</button>
</div>
样本HTML
<div id="page_container">
<div id="page1" style="visibility: hidden">
<div id="inner_page1">
<div id="inner_page1_content">
Page 1 Content goes here.
</div>
<button id="button_1">Click Here</button>
<div id="click_1">press Enter</div>
</div>
<div>
<div id="page2" style="visibility: hidden">
<div id="inner_page2">
<div id="inner_page2_content">
Page 2 Content goes here.
</div>
<button id="button_2">Click Here</button>
<div id="click_2">press Enter</div>
</div>
<div>
<div id="page3" style="visibility: hidden">
<div id="inner_page3">
<div id="inner_page3_content">
Page 3 Content goes here.
</div>
<button id="button_3">Click Here</button>
<div id="click_3">press Enter</div>
</div>
<div>
<div id="submitPage" style="visibility: hidden">
<div id="inner_submitPage">
<div id="inner_submitPage_content">
Submit page Info Goes here.
</div>
<button id="button_4">Click Here</button>
<div id="click_4">press Enter</div>
</div>
<div>
</div>
<div id="side_bar">
<button id="submit_button">Click Here</button>
</div>
样本JQUERY
jQuery(document).ready(function($) {
function handleEvent(e){
var id = null;
var fade_out;
var fade_in;
var the_variable = null;
if (e.type === 'click'){
id = $(this).attr("id");
}else{
id = e.which;
}
switch (id){
case 13:
if ($('#click_1').is(':visible')){
fade_out = '#page1';
fade_in = '#page2';
}
if ($('#click_2').is(':visible')){
fade_out = '#page2';
fade_in = '#page3';
}
if ($('#click_3').is(':visible')){
fade_out = '#page3';
fade_in = '#submitPage';
}
if ($('#click_4').is(':visible')){
fade_out = '#submitPage';
fade_in = '#page1';
}
break;
case 'page1':
fade_out ='#page1";
fade_in = '#page2";
break;
case 'page2':
fade_out ='#page2";
fade_in = '#page3";
break;
case 'page3':
fade_out ='#page3";
fade_in = '#submitPage";
break;
case 'submit_button':
//something like below.....
if $('#page_container'):first-child.is(':visible').(select child ID name){
the_variable = ??child_id_name??;
fade_out = the_variable;
fade_in = '#submitPage";
}
break;
}
$(fade_out).fadeTo( 'fast', 0 ).css('visibility','hidden').css('display','none');
$(fade_in).delay( 800 ).css('visibility','visible').css('display','block').fadeTo( 'slow', 1 );
}
$('#ts_container').on('click', 'button, a', handleEvent);
$(document).on('keypress', handleEvent);
});
我终于想出了解决办法。也许不是最好的。但是，在我学会如何使用不那么乱码的更高级技术之前，它会一直有效。
我为所有内容添加了一个新的 div ID 包装器。在该内容之外创建了一个提交表单包装器，然后添加了一个新的大小写开关以淡出主 ID 包装器，并在有人单击按钮时淡入带有表单的辅助 ID 包装器。
HTML
<div id="left_sidebar"></div>
<div id="main_wrapper">
<div id="content-1"></div>
<div id="content-2"></div> + 100 More.
</div>
<div id="contact_wrapper">
<div id="contact_form2">
</div>
<div id="right_sidebar">
<button id="button1">Click Here</div>
</div>
JQUERY
case: button1:
fade_out = '#main_wrapper';
fade_in = '#contact_wrapper';
break;
您如何 select 当前可见的 parent ID 的第一个 child 并将其存储到变量中？
您可以使用条件检查第一个 children、divEl.children[0] 的计算 and/or 内联样式是否设置为 display: none 或 visibility: hidden.如果不是，则 运行 代码在变量中定义 id。
const parent = document.getElementById('parent')
const children = document.querySelectorAll('.child')
let id = '';
children.forEach(child => {
child.addEventListener('click', e => {
// comment out the following line to see differing results in assignment of ID in console
e.target.children[0].classList.toggle('hide') //<-- using a classList toggle for displaying child element.
let compStyleDisplay = getComputedStyle(e.target.children[0]).getPropertyValue('display')
let compStyleVisibility = getComputedStyle(e.target.children[0]).getPropertyValue('visibility')
// I am ONLY checking the CSS computedStyles for display and visibility,
// not the inline styles, also check if a child exists in the hidden div
compStyleDisplay !== "none" && compStyleVisibility !== "hidden" && e.target.children[0].children[0] !== undefined ? id = e.target.children[0].children[0].id : id = 'non-existent';
console.log(`first childs ID is: ${id}`)
})
})
.hide {
display: none;
visibility: hidden;
}
.id {
background: yellow;
}
#sub1,
#sub2,
#sub3,
#sub4,
#sub5 {
background-color: red;
color: white;
padding: 5px;
}
.sub {
background-color: rgba(0,0,0,0.5);
padding: 2px;
}
<div id='parent'>
<div class="child" id="1">some content
<div class="hide" id="sub1">hidden div with one child
<div class="sub" id="sub1-1">This is some child content of a hidden div</div>
<div class="sub" id="sub1-2">This is some child content of a hidden div</div>
</div>
</div>
<div class="child" id="2">some content
<div class="hide" id="sub2">hidden div with two children
<div class="sub" id="sub2-1">This is some child content of a hidden div</div>
<div class="sub" id="sub2-2">This is some child content of a hidden div</div>
</div>
</div>
<div class="child" id="3">some content
<div class="hide" id="sub3">hidden div with three children
<div class="sub" id="sub3-1">This is some child content of a hidden div</div>
<div class="sub" id="sub3-2">This is some child content of a hidden div</div>
<div class="sub" id="sub3-3">This is some child content of a hidden div</div>
</div>
</div>
<div class="child" id="4">some content
<div class="hide" id="sub4">hidden div with four children
<div class="sub" id="sub4-1">This is some child content of a hidden div</div>
<div class="sub" id="sub4-2">This is some child content of a hidden div</div>
<div class="sub" id="sub4-3">This is some child content of a hidden div</div>
<div class="sub" id="sub4-4">This is some child content of a hidden div</div>
</div>
</div>
<div class="child" id="5">some content
<div class="hide" id="sub5">Hidden div without children</div>
</div>
</div>