Fatal编程技术网
  • javascript/
  • Javascript 刷新时更改Div和Body类

Javascript 刷新时更改Div和Body类

javascript jquery

Javascript 刷新时更改Div和Body类,javascript,jquery,Javascript,Jquery,我正在使用它将拉伸的背景图像应用于我的身体元素 $("body.apples").backstretch("/apples.jpg"); $("body.oranges").backstretch("/oranges.jpg"); $("body.pears").backstretch("/pears.jpg"); 我希望我的body类在刷新时更改，以便在刷新时显示不同的背景图像。我还试图解决如何在刷新页面时仅显示下面的相关.wrapperdiv <body class="apples"

我正在使用它将拉伸的背景图像应用于我的身体元素

$("body.apples").backstretch("/apples.jpg");
$("body.oranges").backstretch("/oranges.jpg");
$("body.pears").backstretch("/pears.jpg");
我希望我的body类在刷新时更改，以便在刷新时显示不同的背景图像。我还试图解决如何在刷新页面时仅显示下面的相关
.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

在此方面的任何帮助都将不胜感激。提前谢谢。

也许你可以用if-else语句来表达？你只需要一个包装器

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

if（$（“body”）.hasClass（“yourfruthhere”））{
$（“.wrapper”）.html（“关于这种水果的一些内容”一些内容”
”；
您可以在页面加载后检测正文的类别，将该类别存储为变量，并仅显示也具有该类别的相关内容：

HTML:

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

我不知道您在javascript中处理对象有多舒服，但这里有一个解决方案您的问题：

  • 创建一个水果对象，该对象包含body的类名、它自己的元素和它自己的图像。每个水果对象都有一个Show（）方法，可以更改body元素的类、背景图像和Show本身。它还可以有一个Hide（）方法来隐藏它自己

  • 创建一个水果对象数组，并随机化索引。对所有水果对象调用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();
});

    var run=function（）{
苹果=新水果(
“苹果”，
$（'苹果'），
"apple.jpg";；
var oranges=新水果(
“橙子”，
$（“.橙子”），
“orange.jpg”）；
梨=新果实(
‘梨’，
元("梨"),，
‘pear.jpg’；
var果篮=新果篮（[苹果、桔子、梨]）；
水果篮；
}
var Fruit=函数（类名、元素、图像）{
this.show=函数（）{
$（元素）.show（）；
$（'body'）.backstretch（图像）；
$（'body'）.removeClass（）.addClass（类名称）；
}
this.hide=函数（）{
$（元素）.hide（）；
}
}
var FruitBasket=函数（水果列表）{
this.displayRandomFruit=函数（）{
var randomFruitIndex=Math.floor（Math.random（）*fruitList.length）；
对于（var i=0；i

    除了相关div之外，我还需要一种在刷新时更改body类的方法。这很好，但我的问题是页面上隐藏了另外两个元素。如果没有显示它们，我想将它们从文档中完全删除。可能吗？当然可以。jQuery的.html（）函数可用于替换元素的内容。因此，请删除Fruit.hide（）方法和对它的所有调用，并修改Fruit.show（）方法以执行类似于$（'body'）.html（元素）的操作，而不是$（'body'）.show（）； 
    <div class="oranges">
    <p class="oranges">Oranges</p>
    <p class="apples">Apples</p>
    <p class="pears">Pears</p>
</div>

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

    $('p').hide(),
    $('p.' + activeClass).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();
});