Question

我有一张桌子，我在列表中使用了fadeToggle来隐藏和显示表格。列表背景是绿色，但我想隐藏表格时更改列表颜色，当我点击显示表格时它返回绿色，但我的代码不起作用。

<div class="main">
        <ul class="top_menu" >
            <li class="orderList" id="starter_li">Starter</li>
            <li class="orderList" id="soup_li"> Soup</li>
            <li class="orderList" id="seafood_li">Seafood</li>
            <li class="orderList" id="return_li">Return All</li>
        </ul>
        <div id="middleBox">
            <table class="food_table" id="starters" style="width:100%">
                <tr></tr>
                <tr>
                    <td>S1</td> 
                    <td>Starter1<br>
                    <td>10</td>
                </tr>
        <table class="food_table" id="soups" style="width:100%">
                <tr>
                    <td>1</td>
                    <td>Soup1</td>
                    <td>4</td>
                </tr>   
            </table>
         <table class="food_table" id="seafood" style="width:100%">
                <tr>
                    <td>2</td>
                    <td>seafood1</td>
                    <td>7</td>
                </tr>   
            </table>

的jQuery

    $(document).ready(function(){
        $("#starter_li").click(function(){
        $("#starters").fadeToggle(500);

        $(this).css("background-color","white");
        $(this).css("color","#05FF0A");

    });
        $("#soup_li").click(function(){
        $("#soups").fadeToggle(500);
        $(this).css("background-color","white");
        $(this).css("color","#05FF0A");
    });
        $("#seafood_li").click(function(){
        $("#seafoods").fadeToggle(500);
        $(this).css("background-color","white");
        $(this).css("color","#05FF0A");
      });
        $("#return_li").click(function(){
                $(".food_table").fadeIn(500);
        });


            $('.orderList').click(function(e){
            var color = $(this).css('background-color');
            if (color == 'white')
             $(this).css('background-color','#05FF0A');
         });

}）;

Answer 1

尝试

更改

if (color == 'white')

到

if (color == 'rgb(255, 255, 255)')

更新

在<tbody></tbody>元素周围添加了<tr></tr>;关闭</table>标签; "s"到#seafood元素id;通过利用click

中选择器的相似性，将html事件调整为2

$(document).ready(function() {

  $(".orderList").not("#return_li").on("click", function(e) {
    var elem = $(this);
    $("#" + this.id.slice(0, -3) + "s").fadeToggle(500);
    var color = elem.css('background-color');
    console.log(color);
    if (color === 'rgb(255, 255, 255)') {
      elem.css("background-color", "#05FF0A")
    } else {
      elem.css("background-color", "rgb(255, 255, 255)")
    }
  });

  $("#return_li").click(function() {
    $(".food_table").fadeIn(500);
    $(this).siblings().each(function() {
        $(this).css("background-color","rgb(255,255,255)")
    })
  });

});

.orderList {
  background-color: white;
  color:black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="main">
  <ul class="top_menu">
    <li class="orderList" id="starter_li">Starter</li>
    <li class="orderList" id="soup_li">Soup</li>
    <li class="orderList" id="seafood_li">Seafood</li>
    <li class="orderList" id="return_li">Return All</li>
  </ul>
  <div id="middleBox">
    <table class="food_table" id="starters" style="width:100%">
      <tbody>
        <tr></tr>
        <tr>
          <td>S1</td>
          <td>Starter1
            <br>
            <td>10</td>
        </tr>
      </tbody>
    </table>
    <table class="food_table" id="soups" style="width:100%">
      <tbody>
        <tr>
          <td>1</td>
          <td>Soup1</td>
          <td>4</td>
        </tr>
      </tbody>
    </table>
    <table class="food_table" id="seafoods" style="width:100%">
      <tbody>
        <tr>
          <td>2</td>
          <td>seafood1</td>
          <td>7</td>
        </tr>
      </tbody>
    </table>

jQuery .css（）单击条件更改颜色

1 个答案: