Question

我正在使用此Backstretch plugin将拉伸的背景图像应用于我的身体元素。

$("body.apples").backstretch("/apples.jpg");
$("body.oranges").backstretch("/oranges.jpg");
$("body.pears").backstretch("/pears.jpg");

我希望我的身体类在刷新时更改，因此它会在刷新时显示不同的背景图像。我还试图找出如何在刷新页面时仅显示下面的相关.wrapper div。

<body class="apples">
    <div class="wrapper apples">
        <h1>Something about Apples</h1>
        <p>Some content</p>
    </div>

    <div class="wrapper oranges">
        <h1>Something about Oranges</h1>
        <p>Some content</p>
    </div>

    <div class="wrapper pears">
        <h1>Something about Pears</h1>
        <p>Some content</p>
    </div>
</body>

我设法让.wrapper div在刷新时用这个JS来改变：

function randomFromTo(from, to) {
        return Math.floor(Math.random() * (to - from + 1) + from);
    }

    function RandomFruit() {
        var r = randomFromTo(1, $('.wrapper').length);
        $('.wrapper').hide().eq(r - 1).show();
    }

    $(document).ready(function() {
        RandomFruit();
});

我在这里有一个工作演示：http://codepen.io/realph/pen/KCEtB

出于某种原因，我无法弄清楚如何制作背景和.wrapper div更改。

对此有任何帮助表示赞赏。提前谢谢。

Answer 1

也许你可以使用if else语句来做到这一点？而你只需要1个包装

if ( $("body").hasClass("yourfruithere") ) {
$(".wrapper").html("<h1>Something about this fruit</h1><p>some content</p>");

Answer 2

您可以在页面加载后检测正文的类，将该类存储为变量，并仅显示也具有该类的相关内容：

<强> fiddle

HTML：

<div class="oranges">
    <p class="oranges">Oranges</p>
    <p class="apples">Apples</p>
    <p class="pears">Pears</p>
</div>

jQuery的：

$(function() {
    var activeClass = $('div').attr('class');

    $('p').hide(),
    $('p.' + activeClass).show();
});

此函数在文档加载时作为演示运行，但是您希望确保在将加载到页面上之后将正文的类存储为变量，并由其他JS动态设置。否则你可能会得到一个null类。

Answer 3

我不知道你在javascript中使用对象有多舒服，但这里有一个解决你问题的方法：

创建一个Fruit对象，其中包含正文的类名，自己的元素和自己的图像。每个水果对象都有一个Show（）方法，它可以改变body元素的类，背景图像和show本身。它还有一个隐藏自身的Hide（）方法。
创建一个Fruit对象数组，并随机化一个索引。在所有这些上调用Hide（），然后在所选的一个上调用Show（）。

这是一个实现：

var run = function () {
    var apples = new Fruit(
        'apples',
        $('.apples'),
        'apple.jpg');
    var oranges = new Fruit(
        'oranges',
        $('.oranges'),
        'orange.jpg');
    var pears = new Fruit(
        'pears', 
        $('.pears'),
        'pear.jpg');

    var fruitBasket = new FruitBasket([apples, oranges, pears]);
    fruitBasket.displayRandomFruit();
}

var Fruit = function (className, element, image) {
    this.show = function () {
        $(element).show();
        $('body').backstretch(image);
        $('body').removeClass().addClass(className);
    }

    this.hide = function () {
        $(element).hide();
    }
}

var FruitBasket = function (fruitList) {
    this.displayRandomFruit = function () {
        var randomFruitIndex = Math.floor(Math.random() * fruitList.length);
        for (var i = 0; i < fruitList.length; i++) {
            fruitList[i].hide();
        }
        fruitList[randomFruitIndex].show();
    }
}

$(document).ready(function () {
    run();
});

Here it is on jsfiddle.

在刷新时更改Div和Body类

3 个答案: