通過添加單個字符的javascript字符串操作

在我的情況下，當您單擊一個按鈕時，它會在我的字符串上添加一個get參數，但如果再次單擊它應該爲該參數的值添加連字符。這實際上將用於下降和上升通過添加單個字符的javascript字符串操作

我當前的代碼是：

<!DOCTYPE html> 
<html> 

    <head> 
    <link rel="stylesheet" href="style.css"> 
    <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script> 
    <script src="script.js"></script> 
    </head> 

    <body> 
    <p id ='demo'></p> 
    <button column-data='age'>Age</button> 
    <button column-data='height'>Height</button> 
    <button column-data='weight'>Weight</button> 
    </body> 
    <script> 
    document.getElementById("demo").innerHTML = window.location.href; 
    $(function() { 
     $('button').click(function(){ 
     data = $(this).attr('column-data'); 
     order_regex_asc = new RegExp('[&?]order=' + data, 'g') 
     order_regex_desc = new RegExp('[&?]order=-' + data, 'g') 
     _loc = window.location.href 
     if(data){ 
      if (_loc.search(/[?]order/) == -1){ // Conditional to start GET parameter 
       _loc = _loc + '?order=' + data; 
       window.location = _loc 
      }else{ 
       if (_loc.search(order_regex_asc) != -1){ // Conditional to make this decending 
        console.log('dean'); 
        // _loc = _loc.replace(order_regex_asc, '') 
        // data = '-'+data 
       }else if (_loc.search(order_regex_desc) != -1){ // Conditional to make this ascending 
        console.log('armada'); 
        // _loc = _loc.replace(order_regex_desc, '') 
       }else{ 
        window.location = _loc + '&order=' + data; 
       } 

      } 
      document.getElementById("demo").innerHTML = _loc; 
     } 
     }); 
    }); 
    </script> 
</html>

這裏是我的plunker：https://plnkr.co/edit/nE6MK7PWb54GkXOdIojn?p=preview

舉例來說，在我的plunker，如果你點擊「年齡」按鈕將添加？訂單=年齡。如果第二次點擊它，adde應該是？order = -age。如果你第三次點擊它，那麼它應該回到？order = age。如果你繼續點擊，那麼它會在添加刪除連字符時來回切換。

我已經在這裏停留幾個小時，它已經這麼長時間，因爲我在javascript

來源

2017-01-25 Dean Christian Armada

也許你可以有一個對象並保存您的選項，並設置一個標誌，知道是否啓用或禁用它。 – claudios

@claudios，你能提供一個代碼來展示你的想法嗎？ –

我知道這不是代碼審查，但你可以考慮使用[window.pushState（）]（https://developer.mozilla.org/en-US/docs/Web/API/History_API#Adding_and_modifying_history_entries）和[窗口。 replaceState（）]（https://developer.mozilla.org/en-US/docs/Web/API/History_API#The_replaceState（）_method），除非你真的需要頁面重新加載... –

<!DOCTYPE html> 
<html> 

    <head>  
    <link rel="stylesheet" href="style.css"> 
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script> 
<script src="script.js"></script> 
    </head> 

    <body> 
    <p id ='demo'></p> 
    <button type="button" column-data='age'>Age</button> 
    <button type="button" column-data='height'>Height</button> 
    <button type="button" column-data='weight'>Weight</button> 
    <script> 
    document.getElementById("demo").innerHTML = window.location.href; 
    $(function() { 
     $('button').click(function(){ 
     data = $(this).attr('column-data'); 
     order_regex_asc = new RegExp('[&?]order=' + data, 'g') 
     order_regex_desc = new RegExp('[&?]order=-' + data, 'g') 
     _loc = window.location.href 
     if(data){ 
      if (_loc.search(/[?]order/) == -1){ // Conditional to start GET parameter 
       _loc = _loc + '?order=' + data; 
       window.location = _loc 
      }else{ 
       if (_loc.search(order_regex_asc) != -1){ // Conditional to make this decending 
        console.log('dean'); 
        _loc = _loc.replace(data, '-'+data) 
        window.location=_loc; 

       }else if (_loc.search(order_regex_desc) != -1){ // Conditional to make this ascending 
        console.log(armada); 
        _loc = _loc.replace('-'+data,data) 
        window.location=_loc; 
        // _loc = _loc.replace(order_regex_desc, '') 
       }else{ 
        window.location = _loc + '&order=' + data; 
       } 

      } 
      document.getElementById("demo").innerHTML = _loc; 
     } 
     }); 
    }); 
    </script> 
    </body> 

</html>

來源

2017-01-25 05:48:13

完美答案！ –

易於編碼。

<head> 
    <link rel="stylesheet" href="style.css"> 
    <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script> 
    <script src="script.js"></script> 
    </head> 

    <body> 
    <p id ='demo'></p> 
    <button column-data='age'>Age</button> 
    <button column-data='height'>Height</button> 
    <button column-data='weight'>Weight</button> 

    <script> 
    document.getElementById("demo").innerHTML = 
    window.location.href; 
    $(function() { 
     $('button').click(function(){ 
     data = $(this).attr('column-data'); 
     order_regex_asc = new RegExp('[&?]order=' + data, 'g') 
     order_regex_desc = new RegExp('[&?]order=-' + data, 'g') 
     _loc = window.location.href 

     //if(_loc.indexOf('?order=-')) 
     zinData = '?order=' + data; 
     zinNegativeData = '?order=' + "-" + data; 

     if(_loc.indexOf(zinData) == -1){ 
      _loc = _loc.replace(zinNegativeData, ''); 
      data = zinData; 
     } 
     else{ 
      _loc = _loc.replace(zinData, ''); 
      data = zinNegativeData; 
     } 
     _loc = _loc + data; 
       window.location = _loc 
      document.getElementById("demo").innerHTML = _loc; 

     }); 
    }); 
    </script> 
</body> 
</html>

來源

2017-01-25 05:58:03

通過添加單個字符的javascript字符串操作

回答

相關問題