[英]How to append html to a div with jquery using “(this)”
I am developing a script to use in my PHP page in wordpress. My purpose is to create a title on any image shown in my photo gallery in lightbox, so I developed this:
$(".responsive1").bind("click", function() {
$(this).("<div class='imgTitle'><?php echo $title ?></div>").appendTo(".lb-nav");
});
But unfortunately it does not work. I have this feedback from the browser
>SyntaxError: missing name after . operator
Basically, I wish that every time that I click the image in the thumbnail with class `responsive1`, in the lightbox image that pop up, and a title will be added at the top.
To do this, I need to refer to that image using `this` after the function starts the imgtitle class is added and then appended to that lightbox image, once popped up.
Any ideas? I think my script is not in the correct syntax
thanks to everyone for help
My website page with the gallery, in case it can helps: http://www.paolobergomi.it/new-gallery/outdoor-portraits/
// Original post modified for better understanding thanks again for all that are trying to help. //对原始帖子进行了修改,以更好地理解,再次感谢您提供的所有帮助。 As you see..there is loop. 如您所见..有循环。 If I leave the JS code like this, all the titles of the images appears on each images together, and not the related title. 如果我这样保留JS代码,则图像的所有标题会一起出现在每个图像上,而不是相关的标题。 I am not able to relate the title to that(this) single image. 我无法将标题与该(该)单个图像相关联。
<?php
/*
Template Name: Gallery Page
*/
?>
<?php get_header(); ?>
<?php
// check if the repeater field has rows of data
if( have_rows('category_gallery') ):
// loop through the rows of data
while ( have_rows('category_gallery') ) : the_row();
// display a sub field value
$image = get_sub_field('cat_image');
$title = get_sub_field('cat_title');
?>
<a href="<?php echo $image['url']; ?>" data-lightbox="group1" width="220" height="180">
<img class="responsive1" src="<?php echo $image['url']; ?>" data-lightbox="<?php echo $image['url']; ?>">
</a>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script>
$(".responsive1").bind("click", function() {
$(".lb-nav").prepend("<div class='imgTitle'><?php echo $title ?></div>");
});
</script>
<?php
endwhile;
else :
// no rows found
endif;
?>
<div class="spacing"></div>
<?php get_footer(); ?>
You can use append()
or prepend()
and go figure out what both do :) 您可以使用append()
或prepend()
来确定两者的作用:)
$(".responsive1").bind("click", function() {
$(".lb-nav", this).append("<div class='imgTitle'><?php echo $title ?></div>");
});
I agree with Mark Knol's answer. 我同意马克·克诺尔的回答。 But in more detail it would look some thing like this. 但更详细地说,它看起来像这样。
<div class="foo">
<h1 class="my-header"></h1>
<span>foo</span>
</div>
<h2 class="my-header">baz</h2>
$('.foo').on('click', function() {
$('.my-header', this).append('<span>bar</span>');
});
The 'this' defines the context of the selector. “ this”定义选择器的上下文。 And is like saying search for this selector (.my-header) in the context of where the click event happened. 并且就像说在单击事件发生的上下文中搜索此选择器(.my-header)。
jsfiddle: https://jsfiddle.net/yyjudgdp/ jsfiddle: https ://jsfiddle.net/yyjudgdp/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.