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.
See Question&Answers more detail:os
