使用JavaScript設置HTML div值

我有一個帶有2個div（除其他外）的HTML頁面 - 「person」和「person-success」，其中隱藏了「person」和「person-success」。當點擊「人物」中的按鈕時，將顯示可見的div和先前隱藏的div「person-success」。使用JavaScript設置HTML div值

<div id="person"> 
    <br><br> 
    <div id="counterNum" class="counter-color" l10nID="M_AC_UT_TXT_20"></div> 
    <div role="form"> 
     ... 

     <button type="submit" id="addPerson" class="btn btn-success" l10nID="M_LG_BTN_1"></button> 
    </div> 
</div> 
<div id="person-success" class="hide"> 
    ... 
    <p> 
     <span l10nID='M_AC_UT_TXT_19'></span> 
     You can add <span id="limit"></span> more people. <a href='<?php echo $root; ?>edituseraccount.php?action=addPerson'>Add another person?</a> 
    </p> 
</div>

中的JavaScript：下面的代碼給出

$('#addPerson').click(function() { 

    var counter = 0; 
    var limit = 10; 
    var args = { 

    ... 

    $.post("addperson.php",args,function(data){ 
     var response = JSON.parse(data);  
     if(response.status == 0){ 
      counter += 1; 
      if (counter < limit){ 
       $('#counterNum').text(counter); 
       $('#person').hide(); 
       $('#limit').text(limit-counter); 
       $('#person-success').show(); 
      } 
     } 
     console.log(data);  
    }); 
});

現在，當按下按鈕，而「人 - 成功」將顯示，點擊「添加其他人？」應該顯示「人」並隱藏「人 - 成功」。只有這一次，div「counterNum」應該用JavaScript中的「counter」值更新。使用我的代碼，單擊該鏈接將重新打開「person」div並隱藏另一個，但counterNum不會更新，甚至不顯示。有誰知道我該怎麼做？

我希望我能解釋我的問題。將不勝感激任何幫助！

來源

2015-07-28 user3033194

的問題是每次點擊按鈕計數器時間從0開始，試計數器= parseInt函數（$（「＃counterNum」）文本，10）正上方，如果（計數<限制） – Kenny

您的按鈕類型是'提交'，沒有提交整個頁面，然後重新加載？ –

還要注意'submit'是'button'的默認''類型'，所以如果這就是你想要的，你不需要指定它。 –

你聲明的變量是本地作用域。在調用的點擊事件之外全局聲明變量。在每次點擊它重置計數器爲0.

希望它有幫助！

來源

2015-07-28 06:46:40 Prasad

變異計數器使其成爲全球。因爲每次當計數器重置爲零時單擊addPerson按鈕時。

var counter = 0; 
var limit = 10; 

$('#addPerson').click(function() { 

    var args = { 

    ... 

    $.post("addperson.php",args,function(data){ 
     var response = JSON.parse(data);  
     if(response.status == 0){ 
      counter += 1; 
      if (counter < limit){ 
       $('#counterNum').text(counter); 
       $('#person').hide(); 
       $('#limit').text(limit-counter); 
       $('#person-success').show(); 
      } 
     } 
     console.log(data);  
    }); 
});

來源

2015-07-28 06:47:45

Nitpick：不要使* global *。只需將它放在點擊處理程序之外的範圍內即可。全局是一件壞事（tm）。 –

使用JavaScript設置HTML div值

回答

相關問題