シングル文字を追加して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に、あなたは「年齢」をクリックすると、これは実際に

私の現在のコードがある降順と昇順に使用されますボタンをクリックすると？order =年齢はとなります。それを2回目にクリックした場合、addeは？order = -ageになるはずです。それを3回目にクリックすると？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）と[window。あなたが実際にページをリロードする必要がない限り、replaceState（）（https://developer.mozilla.org/en-US/docs/Web/API/History_API#The_replaceState（）_メソッド））。 –

<!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の文字列を操作する

答えて

関連する問題