如何将地址附加到 <a> 标签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

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

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

Answer 2

这里的主要问题是您对滑块中的每张幻灯片都使用相同的id。每页不能有多个唯一的id，否则您将面临非标准行为。您的 jQuery sn-p 将正确地将链接附加到它找到的第一个 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 sn-p 可能看起来像这样：

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