Minipreview ссылка jQuery только для предварительного просмотра содержимого родительского <p> или <div>

Я хотел бы использовать https://github.com/lonekorean/mini-preview для создания превью при наведении указателя мыши только на части веб-сайта.

У меня нет проблем с использованием якорей с целевого веб-сайта, чтобы скрипт отображал полный предварительный просмотр веб-сайта с прокруткой до того места, где находится отдельный якорь. Однако это не то, что мне нужно.

Я бы хотел, чтобы сценарий отображал только содержимое родительского элемента <p> или <div> привязки.

На сайте целевые якоря ссылок имеют такой код:

      <div class="paragraph">
    <p>
        <a id="anchor_1"></a>
        Foo bar baz.
    </p>
</div>

Итак, я бы хотел, чтобы было показано только небольшое окно предварительного просмотра.

Я подозреваю, что ответ кроется в этой части сценария:

      loadPreview: function() {
    this.$el.find('.' + PREFIX + '-frame')
        .attr('src', this.$el.attr('href'))
        .on('load', function() {
            // some sites don't set their background color
            $(this).css('background-color', '#fff');
});

в частности, .attr('src', this.$el.attr('href'))часть. Хотя я не уверен.

Кто-нибудь знает, как я могу это сделать?
Или вы можете порекомендовать какой-нибудь другой скрипт, который я могу использовать для этого, чтобы все выглядело так же красиво, как этот?

Я не веб-разработчик, поэтому, пожалуйста, не беспокойтесь.
Спасибо

ОБНОВЛЕНИЕ (на основе ответа Свати и соответствующих комментариев):

Например, если мой веб-сайт включает это:

      <body>
    <p>
        <a href="#anchor_on_my_site">See internal</a>
    </p>
    <p>
        <a href="external_website.html#external_anchor">See external</a>
    </p>
    <div class="paragraph">
        <p>
            <a id="anchor_on_my_site"></a>
                Foo bar baz.
        </p>
    </div>
</body>

а внешний веб-сайт включает следующее:

      <body>
    <div class="paragraph">
        <p>
            <a id="external_anchor"></a>
                Qux quux quuz.
        </p>
    </div>
</body>

Я хотел бы See internal для отображения Foo bar baz. и See external для отображения Qux quux quuz.

Источник

1 ответ

Внутри loadPreview функция, которую вы можете использовать closest('p').clone().children().remove().end().text() получить текст от p отметьте где a был наведен, а затем, используя это, поместил этот текст для отображения внутри вашего фрейма div, то есть: .find('.' + PREFIX + '-frame').text(data_to_show) .

Демо-код :

Источник
Другие вопросы по тегам