如何将地址附加到 tag href

Question

我使用bxslider4并启用了字幕。我想添加字幕链接。我做了一些，但仅适用于第一个。如何将所有链接附加到每个字幕。我已经编辑了bxslider javascript文件。

我的滑块php代码：

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 
    }
?>

我在原始bxslider javascript文件中添加了以下代码，以获取图像链接并更改标题href：

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

此代码提供了适用于第一个标题的信息。如果将captionLink添加到href =“”，我认为我可以解决问题<a id="manset_caption_link" href="">，但我不知道该怎么办。

JavaScript代码的最新状态：

// 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

这里的主要问题是，滑块中的每张幻灯片都使用相同的id。每页唯一的id不能超过一个，否则您将面临非标准的行为。您的jQuery代码段将正确地将链接附加到它找到的第一个id（它将始终是第一个幻灯片-即使它们更多）。（下面的代码已更新；尽管我仍然要说，同一页不能多次使用相同的id，显然它破坏了原始的bxslider）]考虑将您的PHP代码更改为将类用于a元素：

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 
    }
?>

然后您的jQuery代码段可能看起来像这样：

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

但是，我强烈建议您不要编辑原始的滑块文件。在加载jQuery和BXSlider之后，制作您自己的JS文件并添加到您的项目中：

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

Answer 2

我解决了我的问题。现在，我可以获取所有链接并附加到eah标题。

我的PHP代码：

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的最后状态：

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