Question

我在 #middlebox 中有三个表我想点击List将表推到顶部例如，现在表格的位置是起始位置 - ＆gt;汤 - ＆gt;海鲜。当我点击 #seafood_li 海鲜表将显示在顶部。所有表格都将设为海鲜 - ＆gt;首发 - ＆gt;汤。当我再次点击 #seafood_li 时，它将恢复正常。我的jQuery代码是切换和隐藏的功能，但我不知道如何修改它

<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>
                    <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="seafood" style="width:100%">
        <tbody>
            <tr>
                <td>2</td>
                <td>seafood1</td>
                <td>7</td>
            </tr> 
        </tbody>  
    </table>
</div>

的jQuery

$(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)");
        });
    });
});

Answer 1

请注意我在HTML中修改的ID，
还添加了一点CSS ...
看到jQuery。我评论了所有有趣的部分。应该清楚它在做什么。

点击LI元素this.id.split("table_")[1]将删除＆＃34;表_＆＃34;检索整个表ID的字符串部分：
如果是：LI的ID是：table_starters，则检索到的IS是starters。

我不确定你对这些绿色的意图是什么......但这应该让你开始。

＆＃13;

$(function() { // DOM ready

  var $orderList = $(".orderList");
  var $middleBox = $("#middleBox");
  var originalHTML = $middleBox.html(); // Memorize it!


  $orderList.not("#orderReturn").on("click", function(e) {
    // Retrieve the second pard of the button ID
    // It's the relation to the table
    var tableId = this.id.split("table_")[1]; // See HTML > modified IDs
    $(this).toggleClass("active");            // See CSS!!!
    $("#"+ tableId).prependTo( $middleBox );
  });


  $("#orderReturn").click(function() {
    $orderList.removeClass("active"); // Remove all special classes
    $middleBox.html( originalHTML );  // Restore original (memorized) HTML
  });


});

＆＃13;

.food_table{
  width:100%;
  background:#eee;
  margin:10px 0;
}
.orderList.active{
  background:#05FF0A;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">

  <ul class="top_menu">
    <li class="orderList" id="table_starters">Starter</li>
    <li class="orderList" id="table_soups"> Soup</li>
    <li class="orderList" id="table_seafoods">Seafood</li>
    <li class="orderList" id="orderReturn">Return All</li>
  </ul>

  <div id="middleBox">
    <table class="food_table" id="starters">
      <tr>
        <td>S1</td> 
        <td>Starter1</td>
        <td>10</td>
      </tr>
    </table>
    <table class="food_table" id="soups">
      <tr>
        <td>1</td>
        <td>Soup1</td>
        <td>4</td>
      </tr>   
    </table>
    <table class="food_table" id="seafoods">
      <tr>
        <td>2</td>
        <td>seafood1</td>
        <td>7</td>
      </tr>   
    </table>
  </div> <!-- !#middleBox -->

</div> <!-- !#main -->

＆＃13;

jQuery单击函数来更改表位置

1 个答案: