Как я могу добавить адрес к тегу <a>href - PullRequest
Новая
       43

Как я могу добавить адрес к тегу <a>href

0 голосов
/ 06 октября 2019

Я использую bxslider4 и титры включены. Я хочу добавить ссылку на подписи. Я сделал это несколько, но он применяется только для первого. Как я могу добавить все ссылки на каждую подпись. Я отредактировал javascript-файл bxslider.

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

Я добавил приведенный ниже код в исходный javascript-файл bxslider, чтобы получить ссылку на изображение и изменить заголовок 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>');
        }

      });
    };

Ответы [ 2 ]

1 голос
/ 06 октября 2019

Я решил свою проблему. Теперь я могу получить все ссылки и добавить подписи к 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>');
        }
      });
    };
0 голосов
/ 06 октября 2019

Основная проблема заключается в том, что вы используете один и тот же 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>');
    }

Я настоятельно не рекомендую вам редактировать оригинальные файлы слайдеров. Создайте свой собственный JS-файл и добавьте его в свой проект после загрузки jQuery и BXSlider: 

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