简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - 如何循环绑定事件？在借款协议处绑定url（DATA.argeement），点击可以跳转至网址
巴扎黑
巴扎黑 2017-04-11 11:40:38
0
1
396

1.想要给每个借款协议绑定不同URL，就是data里面的argeement,点击跳转至不同 url该如何做？我为何 var url=$(".argeement").attr("class");console.log(url); 是undefined

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
</head>
<body>
    <ul>
        
    </ul>
</body>

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://apps.bdimg.com/libs/fastclick/1.0.0/fastclick.min.js" type="text/javascript" charset="utf-8" ></script>
<script  type="text/javascript" charset="utf-8" >
    var DATA='[{"status": "IN_PROGRESS", "loan_limited": "5", "load_no": "123131231", "agreement": "http://www.mop.com/", "payed": "1", "amount": 15000, "loan_time": "2016-06-17"}, {"status": "DONE", "loan_limited": "1", "load_no": "123131123131231", "agreement": "http://www.163.com/", "payed": "1", "amount": 15000, "loan_time": "2016-05-17"}, {"status": "IN_PROGRESS", "loan_limited": "5", "load_no": "123131231231", "agreement": "http://www.baidu.com/", "payed": "1", "amount": 25000, "loan_time": "2016-06-10"}]';

        var dataJSON=JSON.parse(DATA);
        var sort=dataJSON.sort(function(a,b){
         return a.status>b.status?-1:1
     });
    var template="<li class=  $status$ ><p><p>借款金额</p><p>$amount$</p><p > $status$ </p></p>"
            +"<p><p>借款日</p><p>$loan_time$</p></p>"
            +"<p><p>还款期限</p><p>$loan_limited$</p></p>"
            +"<p><p>已还</p><p>$payed$</p></p>"
            +"<p><p>借款编号</p><p>$load_no$</p><p  class='$argeement$'>《借款协议</p></p></li>"

            dataJSON.forEach(function(item){
                var tplReplace=template.replace("$amount$",item.amount)
                .replace("$status$",item.status.toLowerCase())
                 .replace("$status$",function(){
                     if(item.status=="IN_PROGRESS"){
                         return 　"进行中"
                     }
                     else{
                         return "已完结"
                     }
                 })
                .replace("$loan_time$",item.loan_time)
                .replace("$loan_limited$",item.loan_limited)
                .replace("$payed$",item.payed)
                .replace("$argeement$",item.agreement)
                .replace("$load_no$",item.load_no);            
                $("ul").append(tplReplace);
            })
     var bindUrl = function() {
             var url=$(".argeement").attr("class");    

            window.location.href = url;
        }
        var url=$(".argeement").attr("class");    
        console.log(url);
        //$(".argument").fastClick(bindUrl);
</script>
</html>
巴扎黑
巴扎黑

Antworte allen(1)
左手右手慢动作
左手右手慢动作2017-04-11 11:42:38 1 Etage

  1. 你 agreement 很多地方打錯成 argeement....

  2. 你是把網址給取代 class="$agreement$" 所以並不會有 .agreement 存在

  3. 強烈建議這種額外數據不要存在 class 中，可以存在 data-url，但在這裡還是把元素改
    成 a 放進 href 最直觀

  4. FastClick 的用法錯了，下面有改過後的～

下面是修改過後的代碼：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
</head>
<body>
    <ul>

    </ul>
</body>

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://apps.bdimg.com/libs/fastclick/1.0.0/fastclick.min.js" type="text/javascript" charset="utf-8" ></script>
<script  type="text/javascript" charset="utf-8" >
$(function() {

  FastClick.attach(document.body)

  var DATA='[{"status": "IN_PROGRESS", "loan_limited": "5", "load_no": "123131231", "agreement": "123", "payed": "1", "amount": 15000, "loan_time": "2016-06-17"}, {"status": "DONE", "loan_limited": "1", "load_no": "123131123131231", "agreement": "http://www.163.com/", "payed": "1", "amount": 15000, "loan_time": "2016-05-17"}, {"status": "IN_PROGRESS", "loan_limited": "5", "load_no": "123131231231", "agreement": "http://www.baidu.com/", "payed": "1", "amount": 25000, "loan_time": "2016-06-10"}]';

  var dataJSON = JSON.parse(DATA);
      var sort = dataJSON.sort( function(a, b) {
       return a.status > b.status ? -1 : 1
   });

  var template = '<li class="$status$"><p><p>借款金额</p><p>$amount$</p><p>$status$</p></p>'
          +'<p><p>借款日</p><p>$loan_time$</p></p>'
          +'<p><p>还款期限</p><p>$loan_limited$</p></p>'
          +'<p><p>已还</p><p>$payed$</p></p>'
          +'<p><p>借款编号</p><p>$load_no$</p><a class="agreement" href="$agreement$">《借款协议》</a></p></li>'

  dataJSON.forEach(function(item) {
      var tplReplace = template.replace("$amount$", item.amount)
      .replace("$status$", item.status.toLowerCase())
      .replace("$status$", function(){
           if(item.status == "IN_PROGRESS"){
               return 　"进行中"
           }
           else{
               return "已完结"
           }
       })
      .replace("$loan_time$",item.loan_time)
      .replace("$loan_limited$",item.loan_limited)
      .replace("$payed$",item.payed)
      .replace("$agreement$",item.agreement)
      .replace("$load_no$",item.load_no);
      $("ul").append(tplReplace);
  })


})
</script>
</html>
Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！