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/

//修改原始帖子以便更好地理解再次感谢所有想要帮助的人。如你所见..有循环。如果我像这样离开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）”将jtml附加到带有jquery的div

2 个答案: