如何将地址附加到 <a> 标签 href

Question

我使用 bxslider4 并启用了字幕。我想在字幕中添加 link。我做了一些，但它只适用于第一个。如何将所有 link 附加到每个字幕。我编辑了 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 文件以获取图像 link 并更改标题 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 代码段将正确地将 link 附加到它找到的第一个 id （这将始终是第一张幻灯片 - 即使有更多幻灯片）。
（下面的代码已更新；虽然我仍然说你不能在每个页面上多次使用相同的 id，显然它会破坏原始的 bxslider）

考虑更改您的 PHP 代码以将 class 用于 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

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

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

如何将地址附加到 <a> 标签 href

How can I append address to <a> tag href

javascript

php

jquery

html

bxslider