如何修复jQuery显示/隐藏和父级导航? [英] How to fix jQuery show/hide and parent navigation?
问题描述
我真的很喜欢jquery，它可以轻松浏览dom并显示/隐藏内容，但是如果不起作用，则似乎很难调试.我做了一些按钮来选择文本.按下主按钮可切换文本按钮，效果很好.
I really love jquery that makes it easy to navigate the dom and to show/hide stuff, but if it doesn't work it seems hard to debug. I made some buttons for selecting texts. Pressing the main button toggles the text buttons, which works nicely.
按下文本按钮不会将文本复制到选择字段.但是，在隐藏文本按钮之后，主按钮无法再次切换，以防隐藏文本按钮，以防用户想要选择其他文本.
Pressing a text button does copy the text to the selection field. However, after hiding the text buttons, the main button cannot toggle again, to unhide the text buttons in case the user wants to select another text.
此外，我在使用jQuery parent()和sibling()从文本字段导航到选择字段时遇到麻烦.我用JS parentElement修复了这个问题，但是我想知道我做错了什么以及如何在jQuery中做到这一点.
Beside, I had trouble using jQuery parent() and sibling() to navigate from the text field to the selection field. I fixed this with JS parentElement, but I wonder what I did wrong and how to do this in jQuery.
这是我的代码，看起来很多，但我想保留css以便更轻松地使用实际的按钮形状元素重新创建:
Here is my code, it looks a lot, but I wanted to leave the css in to make it easier to recreate the with actual button-shape elements:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
// callback for the onclick event on the choice buttons
// (not used)
// copy the text of a choice to the selection field
function choice(s) {
var txt = $(s).text();//s.textContent;
$(s.parentElement.parentElement.parentElement.nodeName).children('.selection').text(txt);//copies selected text to selection field
$(s).parent().toggle();//hide(); hides all buttons of the block
//var d1 = $('div.selection').text();//ok
//var d9 = $(s).closest('.choiceblock').find('selection').text();
//var l9 = $(s).closest('.choiceblock').find('selection').length;
//var d2 = $('div#material_quant div.selection').text();//ok
//var n2 = $('div#material_quant div.selection').attr('name');
//var d3 = $('div#material_quant div.choices').siblings('.selection').text();
//var n3 = $('div#material_quant div.choices').siblings('.selection').attr('name');
//var l3a = $('div#material_quant div.choices').siblings().length;//?
//var l3 = $('div#material_quant div.choices').siblings('.selection').length;//0
//var d4 = $(s).parent().parent().siblings('.selection').text();
//var n5 = $(s).parent().attr('name');
//var n6 = $(s).parent().parent().attr('name');
//var d5 = $(s).attr('name');
//var d5a = s.nodeName;//DIV
//var d6 = s.parentElement.className;//ch_qualitative
//var d7 = s.parentElement.parentElement.className;//choices
//var d8 = s.parentElement.parentElement.parentElement.nodeName;//DIV
//var d10 = $(s.parentElement.parentElement.parentElement.nodeName).children('.selection').length;//19
//$(s.parentElement.parentElement.parentElement.nodeName).children('.selection').text(txt);//works
//$(s).parent().parent().siblings('.selection').text(txt);
return false;
}
$(document).ready(function () {
// click handler on the text buttons
$('div.choices div.button').click(function () {
// get the selected text
var txt = $(this).text();
// copy selected text to selection field
$(this.parentElement.parentElement.parentElement.nodeName).children('.selection').text(txt);
$(this).parent().hide();
return false;
});
// click handler on the entire block
$('div#material_quant div.button').click(function () {
$('div.choices').toggle()
});
});
</script>
<style>
div.button {
float: left;
height: 2em;
line-height: 2em;
width: 6em;
color: white;
background-color: darkgreen;
text-decoration: none;
display: inline-block;
margin: 1em;
text-align: center;
}
div.selection {
display: inline-block;
height: 2em;
line-height: 2em;
margin: 1em;
}
</style>
</head>
<body>
<div id="material_quant" class="choiceblock">
<div class="button">Materiaal..</div>
<div class="selection">(geen)</div>
<div style="clear: both;" />
<div class="choices">
<div class="ch_qualitative">
<div class="button">Veegstof</div>
<div class="button">Stripmonster</div>
<div style="clear: both;" />
</div>
<div class="ch_quantitative">
<div class="button">Vloerb</div>
<div class="button">Isolatie</div>
<div style="clear: both;" />
<div class="button">Plaat</div>
<div class="button">Kit</div>
<div style="clear: both;" />
<div class="button">Koord/Vilt</div>
<div class="button">Bitumen</div>
<div style="clear: both;" />
<div class="button">Pakking</div>
<div class="button">Cement</div>
</div>
</div>
</div>
</body>
</html>
我还留下了我的jQuery实验代码的注释.
I also left in comments my jQuery experimental code.
推荐答案
正如我在评论中所述，您没有正确关闭div标签.
As I stated in the comments, you're not closing your div tags correctly.
在任何地方将<div style="clear: both;" />更改为<div style="clear: both;"></div>.
Change <div style="clear: both;" /> to <div style="clear: both;"></div> wherever present.
有关更多信息，请参见:
For more information see:
- Are (non-void) self-closing tags valid in HTML5?
- Is it allowed to have a self-closing div tag in an html document?
这篇关于如何修复jQuery显示/隐藏和父级导航?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
