У меня есть html-страница с несколькими вхождениями описаний, не имеющих гиперссылки, которые сопровождаются явной гиперссылкой, например, так:

Awesome website!

http://www.google.com/

Когда экран становится меньше определенного размера, я хочу, чтобы (1) явная ссылка исчезла и (2) описание стало гиперссылкой. В качестве промежуточного шага я хочу просто изменить h2 на текст a, но это не работает:

$(window).resize(function() {
    if ($(window).width() < 500) {
        $(".description").text($(this).siblings("p").find("a").text());
        $("a").hide();
    } else {
        $("a").show();
        // replace the description, too
    }
});

Я попытался набрать немного больше и обнаружил, что это даже не работает:

$(window).resize(function() {
    if($(window).width() < 500) {
        $(".description").text($(this).text()); // the description disappears
    }
});

несмотря на то, что console.log($(".description").text()); дает мне текст, связанный с description.

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

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

Ethan Kent

Ответов: 2

Ответы (2)

$(window).resize(function() {
        if ($(window).width() < 500) {
            // Traverse all .description
            $(".decription").each(function(){

                // Fetch the next a tag inside the next p
                $el_a = $(this).next("p").find("a")[0];

                // Fetch it's href and hide it
                var href = $el_a.href;
                $el_a.hide();

                // Build new html for description by wrapping it in  with previous href.
                $(this).html(function(){
                  return ''+this.innerHTML+'';
                });
            });
        } else {
            $(".decription").each(function(){

                // Fetch the next a tag inside the next p
                $el_a = $(this).next("p").find("a")[0];

                // Show this element
                $el_a.show();

                // Modify the html by setting its html as the html of its children a
                $(this).html(function(){
                  return $(this).children("a").html();
                });
            });
        }
    });

var $el = $(".description"),
    $sib = $el.siblings('p'),
    desc = $el.text(), // h2 текст
    rdesc = $sib.text(); // a текст

console.log(desc, rdesc)

$(window).resize(function() {
  if ($(window).width() < 500) {
    $(".description").text(rdesc); // заменяем текст h2, если < 500
    $sib.hide() // скрыть p
  } else {
    $(".description").text(desc); // заменяем h2 текст if != < 500
    $sib.show() // показать p
  }
});

Потрясающий сайт!

Google Link

посмотрите этот Fiddle с изменением размера :- https://jsfiddle.net/toopbbLr/

2022 WebDevInsider