我怎样才能将 append 地址<a>标记为 href</a>

Question

I use bxslider4 and captions is enabled. I want to add link to captions. I done it some but it is applied for just first one. How can I append all links to each captions. I have edited bxslider javascript file.

My slider php code:

foreach ($manset_images as $man_img => $value2) {
                                                  ?>

        <div>
            <a  id="slayt_resim_link" href="index.php?url=content&id=<?=$value2->content_id; ?>">
                <img src="<?php echo URL; ?>public/upload/<?=$value2->content_foto?>" title="<?=$value2->content_title?>" data-url="index.php?url=content&id=<?=$value2->content_id; ?>" style="width:100%; height: 350px;">                                
            </a>
        </div>

    <?php 
    }
?>

I added below code to original bxslider javascript file to get image link and change caption href:

    // find image link
    var captionLink = $this(this)$(slayt_resim_link).attr('href');
    $('#manset_caption_link').attr('href', captionLink);

This code provides apply for the first caption. I think I can solve the problem if I add captionLink to href="" <a id="manset_caption_link" href=""> but I dont know How can I do.

Last state of the javascript code:

// bxslider javascript file 719. line   
 /**
     * Appends image captions to the DOM
     */
    var appendCaptions = function() {
      // cycle through each child
      slider.children.each(function(index) {
        // get the image title attribute
        var title = $(this).find('img:first').attr('title');


//------------------ added after ----------------------------
        // find image link
        var captionLink = $this(this)$(slayt_resim_link).attr('href');
        $('#manset_caption_link').attr('href', captionLink);
//------------------------------------------------------------

        // append the caption
        if (title !== undefined && ('' + title).length) {
          $(this).append('<div class="bx-caption"><a id="manset_caption_link" href="---Add captionLink---!!!!!"><span>' + title + '</span></a></div>');
        }

      });
    };

Answer 1

I solved my problem. Now I can get the all links and append to eah captions.

My php code:

foreach ($manset_images as $man_img => $value2) { ?>
    <div>
        <a href="index.php?url=content&id=<?=$value2->content_id; ?>">
            <img src="<?= URL; ?>public/upload/<?=$value2->content_foto?>" title="<?=$value2->content_title?>" data-url="index.php?url=content&id=<?=$value2->content_id; ?>" style="width:100%; height:350px;">                                
        </a>
    </div>
    <?php 
    }
?>

bxslider js last state:

    /**
     * Appends image captions to the DOM
     */
    var appendCaptions = function() {
      // cycle through each child
      slider.children.each(function(index) {
        // get the image title attribute
        var title = $(this).find('img:first').attr('title');
        var captionLink = $(this).find('a:first').attr('href');
        // append the caption
        if (title !== undefined && ('' + title).length) {
          $(this).append('<div class="bx-caption"><a id="manset_caption_link" href="'+ captionLink +'"><span>' + title + '</span></a></div>');
        }
      });
    };

Answer 2

The major problem here is that you are using the same id for each slide in your slider. You can't have more than one unique id per page, otherwise you will face non standard behaviour. Your jQuery snippet will correctly append link to the very first id it finds (which will always be first slide - even though there are more of them).
(code below is updated; while I still say that you can't use the same id more than once per page, apparently it breaks original bxslider)

Consider changing your PHP code to use class for a element instead:

foreach ($manset_images as $man_img => $value2) { ?>
    <div>
        <a id="slayt_resim_link" class="slayt-resim-link" href="index.php?url=content&id=<?=$value2->content_id; ?>">
            <img src="<?= URL; ?>public/upload/<?=$value2->content_foto?>" title="<?=$value2->content_title?>" data-url="index.php?url=content&id=<?=$value2->content_id; ?>" style="width:100%; height:350px;">                                
        </a>
    </div>
    <?php 
    }
?>

Then your jQuery snippet could look like this:

    //------------------ added after ----------------------------
    // find image link
    var captionLink = $(this).find('#slayt_resim_link').attr('href');
    //------------------------------------------------------------

    // append the caption
    if (title !== undefined && ('' + title).length) {
        $(this).append('<div class="bx-caption"><a id="manset_caption_link" href="' + captionLink + '"><span>' + title + '</span></a></div>');
    }

I strongly discourage you from editing original slider files though. Make your own JS file and add to your project instead, after jQuery and BXSlider were loaded:

(function() {
    var slides = jQuery('.slayt-resim-link');
    slides.each( function() {
        var captionLink = $(this).attr('href');
        $(this).find('.bx-caption a').attr('href', captionLink);
    });
})();