javascript - 如何用jquery覆盖css

Question

我知道这段代码有效，但我如何覆盖 .show (display: none) 和背景颜色的 css？如果我单击一个已选择的按钮，所有按钮都应为默认(蓝色)颜色，并且应显示所有元素。但背景颜色和显示:无。不要出现。

$(".category_item").click(function() {
  var category = $(this).attr("id");

  if ($(this).hasClass("selected")) {
    $("#design, #motiongraphic, #photography").css("background-color", "green");
    $(".design, .motiongraphic, .photography").show();

  }

  //changes category and background-color
  if (category === "design") {
    $(".motiongraphic, .photography").hide();
    $("#motiongraphic, #photography").css("background-color", "#313b50").removeClass("selected");
    $(".design").show();
    $("#design").css("background-color", "#d96b6e").addClass("selected");

  }
  if (category === "motiongraphic") {
    $(".design, .photography").hide();
    $("#design, #photography").css("background-color", "#313b50").removeClass("selected");
    $(".motiongraphic").show();
    $("#motiongraphic").css("background-color", "#47beb4").addClass("selected");
  }
  if (category === "photography") {
    $(".design, .motiongraphic").hide();
    $("#design, #motiongraphic").css("background-color", "#313b50").removeClass("selected");
    $(".photography").show();
    $("#photography").css("background-color", "#8a6bbe").addClass("selected");
  }
});

div#i_buttons button {
  padding: 15px;
  margin: 0 2% 6% 2%;
  text-align: center;
  text-decoration: none;
  font-family: "Open Sans", serif;
  font-style: italic;
  font-size: 16px;
  width: 170px;
  background-color: #313b50;
  color: #d9d9d9;
  border: none;
  border-radius: 8px;
  transition-duration: 0.2s;
  -webkit-transition-duration: 0.2s;
}

div#i_buttons button:hover {
  cursor: pointer;
}

div#i_buttons button#design:hover {
  background-color: #d96b6e !important;
}

div#i_buttons button#motiongraphic:hover {
  background-color: #47beb4 !important;
}

div#i_buttons button#photography:hover {
  background-color: #8a6bbe !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Buttons -->
<div id="i_buttons">
  <button type="button" class="category_item" id="design">3D design</button>
  <button type="button" class="category_item" id="motiongraphic">motion graphics</button>
  <button type="button" class="category_item" id="photography">photography</button>
</div>

<!-- Gallery -->
<div id="i_container">
  <div id="i_grid">

    <div class="i_cell design">
      <a target="_blank" href="content.html">
        <div class="overlay"></div><img src="img/3Ddesign.jpg" alt="Project 01"></a>
    </div>
    <div class="i_cell design">
      <a target="_blank" href="content.html">
        <div class="overlay"></div><img src="img/3Ddesign.jpg" alt="Project 02"></a>
    </div>
    <div class="i_cell design">
      <a target="_blank" href="content.html">
        <div class="overlay"></div><img src="img/3Ddesign.jpg" alt="Project 03"></a>
    </div>
    <div class="i_cell motiongraphic">
      <a target="_blank" href="content.html">
        <div class="overlay"></div><img src="img/MotionGraphics.jpg" alt="Project 04"></a>
    </div>
    <div class="i_cell motiongraphic">
      <a target="_blank" href="content.html">
        <div class="overlay"></div><img src="img/MotionGraphics.jpg" alt="Project 05"></a>
    </div>
    <div class="i_cell motiongraphic">
      <a target="_blank" href="content.html">
        <div class="overlay"></div><img src="img/MotionGraphics.jpg" alt="Project 06"></a>
    </div>
    <div class="i_cell photography">
      <a target="_blank" href="content.html">
        <div class="overlay"></div><img src="img/Photography.jpg" alt="Project 07"></a>
    </div>
    <div class="i_cell photography">
      <a target="_blank" href="content.html">
        <div class="overlay"></div><img src="img/Photography.jpg" alt="Project 08"></a>
    </div>
    <div class="i_cell photography">
      <a target="_blank" href="content.html">
        <div class="overlay"></div><img src="img/Photography.jpg" alt="Project 09"></a>
    </div>


  </div>
</div>

Answer 1

只需在js的第7行添加一个return;，并固定按钮的背景色即可。 ;)

$(".category_item").click(function() {
  var category = $(this).attr("id");

  if ($(this).hasClass("selected")) {
    $("#design, #motiongraphic, #photography").css("background-color", "#313b50"); // <-- restore the original color
    $(".design, .motiongraphic, .photography").show();
    return; // <-- need to return here so the below code doesn't run
  }

  //changes category and background-color
  if (category === "design") {
    $(".motiongraphic, .photography").hide();
    $("#motiongraphic, #photography").css("background-color", "#313b50").removeClass("selected");
    $(".design").show();
    $("#design").css("background-color", "#d96b6e").addClass("selected");

  }
  if (category === "motiongraphic") {
    $(".design, .photography").hide();
    $("#design, #photography").css("background-color", "#313b50").removeClass("selected");
    $(".motiongraphic").show();
    $("#motiongraphic").css("background-color", "#47beb4").addClass("selected");
  }
  if (category === "photography") {
    $(".design, .motiongraphic").hide();
    $("#design, #motiongraphic").css("background-color", "#313b50").removeClass("selected");
    $(".photography").show();
    $("#photography").css("background-color", "#8a6bbe").addClass("selected");
  }
});

div#i_buttons button {
  padding: 15px;
  margin: 0 2% 6% 2%;
  text-align: center;
  text-decoration: none;
  font-family: "Open Sans", serif;
  font-style: italic;
  font-size: 16px;
  width: 170px;
  background-color: #313b50;
  color: #d9d9d9;
  border: none;
  border-radius: 8px;
  transition-duration: 0.2s;
  -webkit-transition-duration: 0.2s;
}

div#i_buttons button:hover {
  cursor: pointer;
}

div#i_buttons button#design:hover {
  background-color: #d96b6e !important;
}

div#i_buttons button#motiongraphic:hover {
  background-color: #47beb4 !important;
}

div#i_buttons button#photography:hover {
  background-color: #8a6bbe !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Buttons -->
<div id="i_buttons">
  <button type="button" class="category_item" id="design">3D design</button>
  <button type="button" class="category_item" id="motiongraphic">motion graphics</button>
  <button type="button" class="category_item" id="photography">photography</button>
</div>

<!-- Gallery -->
<div id="i_container">
  <div id="i_grid">

    <div class="i_cell design">
      <a target="_blank" href="content.html">
        <div class="overlay"></div><img src="img/3Ddesign.jpg" alt="Project 01"></a>
    </div>
    <div class="i_cell design">
      <a target="_blank" href="content.html">
        <div class="overlay"></div><img src="img/3Ddesign.jpg" alt="Project 02"></a>
    </div>
    <div class="i_cell design">
      <a target="_blank" href="content.html">
        <div class="overlay"></div><img src="img/3Ddesign.jpg" alt="Project 03"></a>
    </div>
    <div class="i_cell motiongraphic">
      <a target="_blank" href="content.html">
        <div class="overlay"></div><img src="img/MotionGraphics.jpg" alt="Project 04"></a>
    </div>
    <div class="i_cell motiongraphic">
      <a target="_blank" href="content.html">
        <div class="overlay"></div><img src="img/MotionGraphics.jpg" alt="Project 05"></a>
    </div>
    <div class="i_cell motiongraphic">
      <a target="_blank" href="content.html">
        <div class="overlay"></div><img src="img/MotionGraphics.jpg" alt="Project 06"></a>
    </div>
    <div class="i_cell photography">
      <a target="_blank" href="content.html">
        <div class="overlay"></div><img src="img/Photography.jpg" alt="Project 07"></a>
    </div>
    <div class="i_cell photography">
      <a target="_blank" href="content.html">
        <div class="overlay"></div><img src="img/Photography.jpg" alt="Project 08"></a>
    </div>
    <div class="i_cell photography">
      <a target="_blank" href="content.html">
        <div class="overlay"></div><img src="img/Photography.jpg" alt="Project 09"></a>
    </div>


  </div>
</div>