Question

如何在调整浏览器宽度时更改给定段落的内容？例如，在我的网站的移动版本上，我希望带有“.main-lead”类的段落具有以下内容：

<p class="main-lead">Some content goes here.</br>And some content goes here</p>

现在，当有人从平板电脑或笔记本电脑查看此页面时，我希望此段落的内容可以像这样更改：

<p class="main-lead">Previous content has been replaced.</p>

我理解我需要使用jQuery来完成它，并且我试图编写一个脚本来完成这项任务：

jQuery(window).resize(function () {
    if ($(window).width() > 768) {
        // if screen width is more than 768px
        $(".main-lead").html('Previous content has been replaced.');
    }
});

它似乎有效，但是如果用户决定将屏幕重新调整回移动视图，则内容将保持与平板电脑和桌面版本相同，而不是移动版本。

因此，我想在浏览器窗口来回调整浏览器窗口时动态更改此段落的内容。

任何建议都将受到高度赞赏。感谢。

Answer 1

您也可以尝试使用css代码。

<style>
.mobile { display:none; }
@media screen and (max-width:768px) { 
.desktop { display:none; }
.mobile { display:block; }
 } 
</style>
<p class="main-lead">
    <span class="desktop">Some content goes here.</br>And some content goes here</span>
    <span class="mobile">Previous content has been replaced.</span>
</p>

Answer 2

this.getView().byId("secondComboBox").getBinding("items").filter([
        new sap.ui.model.Filter(
                "CategoryID", 
                "EQ", 
                oEvent.getParameter("selectedItem").getKey())  
]);

var $window = $(window),
  $mainLead = $(".main-lead"); // cacheing the main elements for reuse

$window.resize(function() {
  if ($window.width() > 768) {
    // if screen width is more than 768px
    $mainLead.html($mainLead.data('contentNotMobile'));
  } else {
    // if screen width is NOT more than 768px
    $mainLead.html($mainLead.data('contentMobile'));
  }
});

$window.trigger('resize'); // fire the resize even on load to catch the initial state of the page

在进行切换之前，您需要缓存（存储为变量，数据属性等）“原始”内容。在我的示例中，我将内容的两个版本都存储为HTML <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <p class="main-lead" data-content-mobile="Some content goes here.</br>And some content goes here" data-content-not-mobile="Previous content has been replaced.">Some content goes here.</br>And some content goes here</p>，以避免必须管理data-attributes的初始内容。请注意，您也必须“捕获”页面的初始状态。在设置了监听器之后，使用<p>完成了这项工作。

然后，就像扩展现有的$window.trigger('resize')块一样简单if，只要else不大于$(window).width()，就会触发，并恢复缓存的内容/串。 jQuery's .data()是存储此类信息的便捷方式，但您可以通过许多其他方式来执行此操作。

如何根据视口的宽度更改给定段落的内容（即动态内容替换）

2 个答案: