JQuery Bubble Popup: innerhtml hidden div
I'm using the JQuery Bubble Popup library, trying to show a hidden div in the innerHtml variable. Right now I have this:
<div class="button"> Show stuff </div>
<div class="information"> foo </div>
<div class="button"> Show stuff </div>
<div class="information"> bar </div>
<script>
$(document).ready(function(){
$('.information').hide();
$('.button').CreateBubblePopup({
position: 'bottom',
align: 'center',
width: '300',
innerHtml: $(this).next(".information").html(),
innerHtmlStyle: { color:'#000', '开发者_如何学编程text-align':'left', 'font-size':'110%' },
themeName: 'grey',
themePath: '/static/images/jquerybubblepopup-theme',
selectable: true,
});
});
</script>
The thing is, it isn't working as I expected, the problem is in the line
innerHtml: $(this).next(".information").html(),
Because if I put this it works:
innerHtml: 'testing jquery bubblepopup',
The problem with this line:
innerHtml: $(this).next(".information").html(),
is that this
is not referring to what you think it refers to. I think you want it to refer to the current button being affected, but it doesn't - it's the this
value that's in effect in the "ready" handler context.
What you can do (among several things) is use the ".each()" function:
$('.button').each(function() {
$(this).CreateBubblePopup({
position: 'bottom',
align: 'center',
width: '300',
innerHtml: $(this).next(".information").html(),
innerHtmlStyle: { color:'#000', 'text-align':'left', 'font-size':'110%' },
themeName: 'grey',
themePath: '/static/images/jquerybubblepopup-theme',
selectable: true
});
});
Also you've got a stray comma at the end of the bubble popup parameter object, which will get you an error from IE.
精彩评论