javascript - Display paragraph text instead of [object Object] -
i making overlay pop when image clicked. overlay should have picture , paragraph in it. comes up, displays picture, not display paragraph has been hidden actual page css "display: none;" feature , shown again jquery after overlay comes up. instead, displays "[object object] paragraph should be. need show actual text of paragraph instead of registering there there...
i have looked through jquery documentation , seems me closest looking for. before, getting nothing paragraph should be. however, have worked 3 hours on , stumped. have advice?
html
<div class="inscaritem target"> <a href="../insnat.jpg"> <img src="../insnat.jpg" alt="barrows carries nationwide insurance" /> </a> <p class="testertesty hide4target"> test!!! has passed! </p> </div>
css
#overlay { background: rgba(0,0,0,.9); width: 100%; height: 100%; position: fixed; top: 0; left: 0; display: none; text-align: center; } #overlay img { max-width: 60%; max-height: 80%; margin: 8% 20% 0; } #overlay p { color: #fff; } .hide4target { display: none; }
jquery
var $overlay = $('<div id="overlay"></div>'); var $image = $("<img>"); var $caption = $("<p></p>"); //add image $overlay.append($image); //add overlay $("body").append($overlay) //add caption $overlay.append($caption); //capture click event on link image $(".target a").click(function(event){ event.preventdefault(); var piclink = $(this).attr("href"); var captext = $(this).children(":hidden").show(); //update overlay image linked $image.attr("src", piclink); //update overlay caption text $caption.text(captext); //show overlay $overlay.show(); }); //when overlay clicked $overlay.click(function(){ //hide overlay $overlay.hide(); });
in out case $(this).children(":hidden")
search in tag < >, < p > located in parent tag < div class="inscaritem target" >
try this
var captext = $(this).siblings(":hidden").show(); $caption.text(captext.text());
Comments
Post a Comment