如何使用“（this）”将 html 附加到 jquery 的 div

Question

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/

//原post修改为更好理解再次感谢所有试图提供帮助的人。如您所见……有循环。如果我这样留下 JS 代码，图像的所有标题都会一起出现在每张图像上，而不是相关的标题。我无法将标题与那（这个）单张图片联系起来。

<?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(); ?>

Answer 1

您可以使用 append() 或 prepend() 并找出两者的作用:)

$(".responsive1").bind("click", function() {
  $(".lb-nav", this).append("<div class='imgTitle'><?php echo $title ?></div>");
});

Answer 2

我同意 Mark Knol 的回答。但更详细地说，它看起来像这样。

<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>');
});

'this' 定义了选择器的上下文。就像说 在单击事件发生的上下文中搜索此选择器 (.my-header)。

jsfiddle: https://jsfiddle.net/yyjudgdp/

如何使用“（this）”将 html 附加到 jquery 的 div

How to append html to a div with jquery using "(this)"

html

javascript

jquery

appendto