Question

我有一个html页面，其中包含几个非超链接的描述，并带有显式超链接，如下所示：

<h2 class="description">Awesome website!</h2>
<p><a href="http://www.google.com/">http://www.google.com/</a></p>

当屏幕低于一定大小时，我希望（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相关联的文字。

我猜我想要使用的文字在可以使用之前就已经不存在了。

有解决方法或正确的方法吗？我知道我可以超链接并删除/恢复超链接随着屏幕尺寸的变化，但我想知道我正在尝试的东西是否可以工作。

Answer 1

$(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 <a></a> with previous href.
                $(this).html(function(){
                  return '<a href="'+$el_a.html()+'">'+this.innerHTML+'</a>';
                });
            });
        } 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();
                });
            });
        }
    });

Answer 2

var $el = $(".description"),
    $sib = $el.siblings('p'),
    desc = $el.text(), // h2 text
    rdesc = $sib.text(); // a text

console.log(desc, rdesc)

$(window).resize(function() {
  if ($(window).width() < 500) {
    $(".description").text(rdesc); // replace h2 text if < 500
    $sib.hide() // hide p
  } else {
    $(".description").text(desc); // replace h2 text if != < 500
    $sib.show() // show p
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<h2 class="description">Awesome website!</h2>
<p><a href="http://www.google.com/">Google Link</a>
</p>

通过调整大小来检查这个小提琴： - https://jsfiddle.net/toopbbLr/

如何在JQuery

2 个答案: