如何不讓我的bootstrap4下拉排序代碼成為ifhell-有解無憂

我是 javascript/jquery 的自學新手，我想簡化/縮短（但可讀）我的作業代碼，但我想不出任何辦法。問題是我使用了太多的 if 陳述句，我認為代碼可能會更好，但我不知道如何。

它用作排序機制，您只能選擇 2 個專案（1 個類別和 1 個訂單），#sort_text 將像“ID?ASC”一樣輸出它。

var for_button_text_1 = 'ID';
var for_button_text_2 = 'ASC';

$('#sort_text').html(for_button_text_1   '?'   for_button_text_2);

$('#ul_sort a').click(function(e) {
    e.stopPropagation(); //so it won't close after 1 item is selected

    let for_query = '';
    let element_id = $(this).attr('id');

    if (element_id == 1) {
        $('.sort_cat').removeClass('active');
        $('#'   element_id).addClass('active');
        for_query = 'id';
        for_button_text_1 = 'ID';
    } else if (element_id == 2) {
        $('.sort_cat').removeClass('active');
        $('#'   element_id).addClass('active');
        for_query = 'title';
        for_button_text_1 = 'Title';
    } else if (element_id == 3) {
        $('.sort_cat').removeClass('active');
        $('#'   element_id).addClass('active');
        for_query = 'created_at';
        for_button_text_1 = 'Date added';
    } else if (element_id == 4) {
        $('.sort_cat').removeClass('active');
        $('#'   element_id).addClass('active');
        for_query = 'updated_at';
        for_button_text_1 = 'Date edited';
    } else {
        if (element_id == 5) {
            $('.sort_order').removeClass('active');
            $('#'   element_id).addClass('active');
            for_query = 'asc';
            for_button_text_2 = 'ASC';
        } else if (element_id == 6) {
            $('.sort_order').removeClass('active');
            $('#'   element_id).addClass('active');
            for_query = 'desc';
            for_button_text_2 = 'DESC';
        }
    }

    $('#sort_text').html(for_button_text_1   '?'   for_button_text_2);
});

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
<div class="dropdown">
    <a class="btn btn-link text-decoration-none dropdown-toggle" role="button" data-toggle="dropdown"
    aria-expanded="false">
        <span id="icon_sort_change" class="bi bi-funnel"></span>
        Sort by
    </a>
    <ul id="ul_sort" class="dropdown-menu text-decoration-none">

        <a id="1" class="sort_cat dropdown-item active">ID</a>
        <a id="2" class="sort_cat dropdown-item">Title</a>
        <a id="3" class="sort_cat dropdown-item">Date added</a>
        <a id="4" class="sort_cat dropdown-item">Date edited</a>

        <li class="dropdown-divider"></li> <!-- .dropdown-divider -->

        <a id="5" class="sort_order dropdown-item px-3 active">
            Ascending
            <span class="float-right bi bi-arrow-up-short"></span>
        </a>
        <a id="6" class="sort_order dropdown-item px-3">
            Descending
            <span class="float-right bi bi-arrow-down-short"></span>
        </a>
    </ul>
</div>
<span id="sort_text"></span>

注意： var for_button_text 1&2 值應該顯示在a.dropdown-toggle's中innerHTML，但我改變了主意，但變數名沒有改變，哈哈

uj5u.com熱心網友回復：

重復這部分代碼：

    $('.sort_cat').removeClass('active');
    $('#'   element_id).addClass('active');
    for_query = 'created_at';
    for_button_text_1 = 'Date added';

所以你可以通過創建一個函式來簡化它，比如：

const repeatedCode = function(forQuery, forButton) {
    $('.sort_cat').removeClass('active');
    $('#'   element_id).addClass('active');
    for_query = forQuery;
    for_button_text_1 = forButton;
}

并在您的代碼中使用它。喜歡：

repeatedCode('created_at', 'Date added')

我認為您可以進一步簡化它，但在我看來這是一個好的開始。

您可以做的改進：

使用 === 而不是 ==
您可以使用模板文字而不是與加號連接。喜歡

${for_button_text_1} ? ${for_button_text_2}

uj5u.com熱心網友回復：

您可以添加“for_query”和要顯示為 data屬性的文本。
然后，您可以使用 jquery 的.data()方法來獲取這些值。

然后，您可以撰寫一個動態 javascript 來處理未來對類別的任何更改。嘗試這樣的事情

$(document).ready(function(){
    $('#sort_text').html('ID?ASC');

    $('#ul_sort a').click(function(e) {
        e.preventDefault(); // prevent a tags default action
        e.stopPropagation(); // so it won't close after 1 item is selected

        let for_query = $(this).data('query'); // get the value for `for_query`

        // check if the clicked element is a category. if it is, make it active
        // else the clicked element is for ordering. perform same action as one above
        if( $(this).hasClass('sort_cat') ){
            $('.sort_cat').removeClass('active');
            $(this).addClass('active');
        }else{
            $('.sort_order').removeClass('active');
            $(this).addClass('active');
        }

        // get the texts of both selected category and order and display them
        let category = $('.sort_cat.active').data('text');
        let order = $('.sort_order.active').data('text');
        $('#sort_text').html(category   '?'   order);
    });
})

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
<div class="dropdown">
    <a class="btn btn-link text-decoration-none dropdown-toggle" role="button" data-toggle="dropdown"
    aria-expanded="false">
        <i id="icon_sort_change" class="bi bi-funnel"></i>
        Sort by
    </a>
    <div id="ul_sort" class="dropdown-menu text-decoration-none">
        <a href="#" class="sort_cat dropdown-item active" data-text="ID" data-query="id">ID</a>
        <a href="#" class="sort_cat dropdown-item" data-text="Title" data-query="title">Title</a>
        <a href="#" class="sort_cat dropdown-item" data-text="Date added" data-query="created_at">Date added</a>
        <a href="#" class="sort_cat dropdown-item" data-text="Date edited" data-query="updated_at">Date edited</a>

        <div class="dropdown-divider"></div>

        <a href="#" class="sort_order dropdown-item px-3 active" data-text="ASC" data-query="asc">
            Ascending
            <i class="float-right bi bi-arrow-up-short"></i>
        </a>
        <a href="#" class="sort_order dropdown-item px-3" data-text="DESC" data-query="desc">
            Descending
            <i class="float-right bi bi-arrow-down-short"></i>
        </a>
    </div>
</div>
<span id="sort_text"></span>

uj5u.com熱心網友回復：

這是將邏輯濃縮為幾個函式的另一種方法。與 OP 的帖子類似，我也在使用全域變數。我強烈建議尋找其他方式來傳達資訊。我還感到震驚的是，只有一個與查詢相關的變數for_query依次保存排序類別和排序順序。這可能還需要一些修改。

const opts=["","id,ID,","title,Title,","created_at,Date added,","updated_at,Date edited,","asc,,ASC","desc,,DESC"].map(s=>s.split(","));
function setVars(id){
  let o=opts[id];
  ["for_query","for_button_text_1","for_button_text_2"].forEach((b,i)=>o[i]&&(window[b]=o[i]));
}
function showSort(){
  $('#sort_text').html(for_button_text_1   '?'   for_button_text_2);
}
$('#ul_sort').on("click","a",function(e) {
  e.stopPropagation();
  setVars(this.id);            
  showSort();
  console.log(for_query);
});
setVars(1);setVars(5);showSort();

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
<div class="dropdown">
    <a class="btn btn-link text-decoration-none dropdown-toggle" role="button" data-toggle="dropdown"
    aria-expanded="false">
        <span id="icon_sort_change" class="bi bi-funnel"></span>
        Sort by
    </a>
    <ul id="ul_sort" class="dropdown-menu text-decoration-none">

        <a id="1" class="sort_cat dropdown-item active">ID</a>
        <a id="2" class="sort_cat dropdown-item">Title</a>
        <a id="3" class="sort_cat dropdown-item">Date added</a>
        <a id="4" class="sort_cat dropdown-item">Date edited</a>

        <li class="dropdown-divider"></li> <!-- .dropdown-divider -->

        <a id="5" class="sort_order dropdown-item px-3 active">
            Ascending
            <span class="float-right bi bi-arrow-up-short"></span>
        </a>
        <a id="6" class="sort_order dropdown-item px-3">
            Descending
            <span class="float-right bi bi-arrow-down-short"></span>
        </a>
    </ul>
</div>
<span id="sort_text"></span>

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/492945.html

標籤：javascript html jQuery 引导程序 4

上一篇：為什么輸入值不會更新？當我點擊發送按鈕時？

下一篇：如何將類添加到ReactJs中的選定元素