Question

我很想知道如何完成以下工作：

点击时：A上课＆＃34;人＆＃34;，＆＃34; water＆＃34;，＆＃34; wind＆＃34;或＆＃34;淋浴＆＃34; 行动：改变＆＃34; home＆＃34;的背景与这些类对应的特定颜色

所以：如果我点击黄色＆＃34;人物＆＃34;，我希望整个页面也是黄色的。

我已尝试使用此代码，并使其工作，但我希望代码不那么具体，一般更有用！我知道这可以做到，但我失去了它的完成方式哈哈...

示例：

＆＃13;

$(document).ready(function() {
  $(".parent").click(function() { //add event to class
    $("#home").css("background-color", "black"); //change property
  });
});

＆＃13;

.shower {
  background-color: #652D90;
}
.people {
  background-color: #29B473;
}
.water {
  background-color: #2B388F;
}
.city {
  background-color: #FAAF40;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section id="home">
  <section>
    <a href="#">
      <div class="parent city">
        <div class="child-hidden">City</div>
      </div>
    </a>
    <div class="parent water">
      <div class="child-hidden">Water</div>
    </div>
    <div class="parent people">
      <div class="child-hidden">People</div>
    </div>
    <div class="parent shower">
      <div class="child-hidden">Shower</div>
    </div>
  </section>

＆＃13;

我尝试的方式是先取消选择一个类，然后添加另一个，但我不能让它适用于这4种不同的颜色/类：/我知道你可以使用＆＃34;这个＆＃34;解决这个问题，但我不知道。

Answer 1

如果使用自定义数据属性，可能会更容易：

<section>
    <div class="parent city" data-color="#FAAF40">
        <div class="child-hidden">City</div>
    </div>
    <div class="parent water" data-color="#2B388F">
        <div class="child-hidden">Water</div>
    </div>      
    <div class="parent people" data-color="#29B473">
        <div class="child-hidden">People</div>
    </div>
    <div class="parent shower" data-color="#652D90">
        <div class="child-hidden">Shower</div>
    </div>  
</section>

然后在点击时拉动此属性并指定：

$(document).ready(function(){
    $(".parent").click(function(){ //add event to class
        var color = $(this).data("color")
        $("#home").css("background-color", color); //change property
    });
});

Answer 2

另一种方法是使用$(document).ready(function(){ $(".parent").click(function(){ //add event to class var color = $(this).css('backgroundColor'); $("#home").css("background-color", color); //change property }); });

获取背景颜色

var s3 = new AWS.S3();
var s3Params = {
    Bucket: 'your bucket',
    Key: 'path/to/the/file.ext'
};
s3.getObject(s3Params, function(err, res) {
    if (err === null) {
       res.attachment('file.ext'); // or whatever your logic needs
       res.send(data.Body);
    } else {
       res.status(500).send(err);
    }
});

Fiddle

Answer 3

＆＃13;

    $(document).ready(function(){
        $(".parent").click(function(){ //add event to class
            if($(this).hasClass('selected')){
                $(this).removeClass('selected');
            }
            else{
                $(".parent").removeClass('selected');
                $(this).addClass('selected');
            }
            $("#home").removeClass().addClass($(this).attr('class')).removeClass('parent').removeClass('selected');
        });
    });

＆＃13;

    #home{
        padding:20px;
    }
    .shower{
    background-color: #652D90;
    
    }
    .people{
    background-color: #29B473;
    
    }
    .water{
    background-color: #2B388F;
    
    }
    .city{
    background-color: #FAAF40;
    
    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="home">
    <section>
    <div class="parent city">
        <div class="child-hidden">City</div>
    </div>
    <div class="parent water">
        <div class="child-hidden">Water</div>
    </div>      
    <div class="parent people">
        <div class="child-hidden">People</div>
    </div>
    <div class="parent shower">
        <div class="child-hidden">Shower</div>
    </div>  
    </section>

＆＃13;

在ahref CLICK上更改部分BG

3 个答案: