单击添加并删除每个div的背景颜色

Question

您好我是Javascript和Stackoverflow的新手。

我有多个div，点击后会显示和隐藏。同样在点击时，背景颜色会添加到按钮中。只有一个问题。我希望它在您单击其他按钮时删除背景颜色。我怎么能做到这一点？

的JavaScript

$(document).ready(function(){

  $("a.show").each(function(){
    var $this = $(this);
      $(this).click(function(){
        $($this.attr('href')).show();
        $('div.msg').not($this.attr('href')).hide();
      });
   });
});

$('.bg1').click(function(){
    $(this).css("background-color", "green");
});

$('.bg2').click(function(){
    $(this).css("background-color", "blue");
});

$('.bg3').click(function(){
    $(this).css("background-color", "pink");
});

$('.bg4').click(function(){
    $(this).css("background-color", "yellow");
});

HTML

<a class="show" href="#msg1"><div class="bg1">Hello Wolrd</div></a>
<a class="show" href="#msg2"><div class="bg2">Hello Planet</div></a>
<a class="show" href="#msg3"><div class="bg3">Hello Earth</div></a>
<a class="show" href="#msg4"><div class="bg4">Hello Everyone</div></a>

<div id="msg1" class="msg">
  <p>World World World World</p>
</div>

<div id="msg2" class="msg">
  <p>Planet Planet Planet Planet</p>
</div>

<div id="msg3" class="msg">
  <p>Earth Earth Earth Earth</p>
</div>

<div id="msg4" class="msg">
  <p>Everyone Everyone Everyone</p>
</div>

CSS

.msg{
  display:none;
}

以下是我的代码演示：http://codepen.io/anon/pen/RrQpjr

Answer 1

欢迎使用StackOverflow。您的问题有很多解决方案。

当其中一个点击事件被运行时，你可以告诉所有其他bg删除他们的backgroundcolor。例如，您可以使用添加到所有bg div（bg1 - bg4）的其他类bg来执行此操作。请参阅工作示例：http://codepen.io/anon/pen/jWZBpz

$(document).ready(function(){

  $("a.show").each(function(){
    var $this = $(this);
      $(this).click(function(){
        $($this.attr('href')).show();
        $('div.msg').not($this.attr('href')).hide();
      });
   });
});

$('.bg1').click(function(){
    $('.bg:not(.bg1)').css("background-color","");
    $(this).css("background-color", "green");
});

$('.bg2').click(function(){
    $('.bg:not(.bg2)').css("background-color","");
    $(this).css("background-color", "blue");
});

$('.bg3').click(function(){
    $('.bg:not(.bg3)').css("background-color","");
    $(this).css("background-color", "pink");
});

$('.bg4').click(function(){
    $('.bg:not(.bg4)').css("background-color","");
    $(this).css("background-color", "yellow");
});

.msg{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="show" href="#msg1"><div class="bg bg1">Hello Wolrd</div></a>
<a class="show" href="#msg2"><div class="bg bg2">Hello Planet</div></a>
<a class="show" href="#msg3"><div class="bg bg3">Hello Earth</div></a>
<a class="show" href="#msg4"><div class="bg bg4">Hello Everyone</div></a>

<div id="msg1" class="msg">
  <p>World World World World</p>
</div>

<div id="msg2" class="msg">
  <p>Planet Planet Planet Planet</p>
</div>

<div id="msg3" class="msg">
  <p>Earth Earth Earth Earth</p>
</div>

<div id="msg4" class="msg">
  <p>Everyone Everyone Everyone</p>
</div>

请注意，这段代码对于您要实现的目标来说非常漫长，可以使用更少的代码行完成，但我正在尝试向您展示，以便您理解，而不会改变太多到你自己的代码。

这是一个更好，更“清洁”的解决方案。如果您不理解这个问题是如何运作的，请随时提出任何问题：http://codepen.io/anon/pen/OMQpwm

$(document).ready(function(){

  $("a.show").each(function(){
    var $this = $(this);
      $(this).click(function(){
        $($this.attr('href')).show();
        $('div.msg').not($this.attr('href')).hide();
      });
   });

  $('.bg').click(function(){
    $('.bg').css('background-color','');
    $(this).css('background-color',$(this).attr('backgroundcolor'));  
  });

});

.msg{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="show" href="#msg1"><div class="bg" backgroundcolor="green">Hello Wolrd</div></a>
<a class="show" href="#msg2"><div class="bg" backgroundcolor="blue">Hello Planet</div></a>
<a class="show" href="#msg3"><div class="bg" backgroundcolor="pink">Hello Earth</div></a>
<a class="show" href="#msg4"><div class="bg" backgroundcolor="yellow">Hello Everyone</div></a>

<div id="msg1" class="msg">
  <p>World World World World</p>
</div>

<div id="msg2" class="msg">
  <p>Planet Planet Planet Planet</p>
</div>

<div id="msg3" class="msg">
  <p>Earth Earth Earth Earth</p>
</div>

<div id="msg4" class="msg">
  <p>Everyone Everyone Everyone</p>
</div>

Answer 2

您可以先为每个bg（bg1，bg2，bg3，bg4）添加div课程：

然后你可以使用jQuery来切换css背景：

$(this).click(function() {
    $(this).css("background-color", "initial");
});

Answer 3

它有点长，因为有更好的方法，但你可以在设置bg颜色之前清除所有div的bg颜色

<强> Jquery的

$('.bg1').click(function(){
  removebkng();
    $(this).css("background-color", "green");
});

$('.bg2').click(function(){
  removebkng();
    $(this).css("background-color", "blue");
});

$('.bg3').click(function(){
  removebkng();
    $(this).css("background-color", "pink");
});

$('.bg4').click(function(){
  removebkng();
    $(this).css("background-color", "yellow");
});

function removebkng() {
$('.bg1, .bg2, .bg3, .bg4').css("background-color", "");  
}

Demo

较少的代码方法

将您想要的颜色添加为类旁边的数据属性，例如

<div class="bg1" data-bkng="green">Hello Wolrd</div>

然后你可以在代码中获取并设置它

$("[class^=bg]").click(function(){
$("[class^=bg]").css("background-color", "");
var bkgcolor = $(this).attr("data-bkng");
$(this).css("background-color", bkgcolor);
});

Demo

Answer 4

尝试将background-color以class开头的bg元素设置为""

，这些元素不是当前点击的元素

$("[class^=bg]").click(function() {
    $("[class^=bg]").not(this)
    .css("background-color", "")
})

codepen http://codepen.io/anon/pen/YweZjw