How to fix jQuery show/hide and parent navigation?
Question
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.
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.
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>
I also left in comments my jQuery experimental code.
3 answers
solution1
1 ACCPTED 2017-01-12 16:52:30
As I stated in the comments, you're not closing your div tags correctly.
Change <div style="clear: both;" /> <div style="clear: both;" /> to <div style="clear: both;"></div> wherever present.
For more information see:
solution2
0 2017-01-12 16:33:51
The problem is in using $(this).parent().hide() on the click event. You must ensure that you hides the div that the "Materiaal" button is "toggling". Changing only this line works:
$(this).parent().hide();
for this one:
$('div.choices').hide();
Also, you must write specifically the close div tag on "clear: both":
<div style="clear: both;"></div>
solution3
0 2017-01-12 17:00:09
I think the issue is that your top button is toggling 'choices' and your list of buttons is toggling 'ch_qualitative'.
Edit: Change $(this).parent() to $(this).parent().parent() and it should fix your issue
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.